Ir para o conteúdo

Drag & Drog Select Box

Mensagens Recomendadas

davidjmr    0


<select id='sltBox1' multiple>
<option value='1'>Opção A</option>
<option value='2'>Opção B</option>
<option value='3'>Opção C</option>
<option value='4'>Opção D</option>

<select id='sltBox2' multiple></select>

<script language='javascript' type='text/javascript'>

document.getElementById("sltBox1").onmouseup = function(evt )
	var objSource = document.getElementById("sltBox1"); 
	var objTarget = document.getElementById("sltBox2"); 

	for (var i = 0; i < objSource.length; i++)
		if (objSource.options[i].selected) 
			var optObj = document.createElement('option'); 
			optObj.text = objSource.options[i].text; 
			optObj.value = objSource.options[i].value;
			objSource.options[i] = null; i = i - 1;  



olhando para este codigo consigo passar dados de uma select box para outra usando no firefox so que com o IE parece que a coisa tem um crash e nao me deixa sequer mexer no browser e sou obrigado a refrescar a pagina (experimentem passar os items todos para o lado direito)

como posso corrigir isso ? e o que se passa ?


Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
davidjmr    0

O teu código não me deu problema nenhum no IE6 estás a falar do IE7?

sim correcto o problema existe no IE7 e ja ta resolvido...

o problema resolve-se usando o this.releaseCapture() (dentro da funçao do mouseout) de forma a libertar o evento que era o que estava a faltar... no firefox nao temos esse tipo de problemas... em todo o caso deixo aqui um texto de um programador que fala sobre as diferenças do drag and drop de select boxes entre os browsers IE e Firefox/Mozilla,  e que acho importante... (está em ingles peço desculpa!)

Drag and Drop between 2 list boxes in Javascript

Since this was an interesting puzzle, I spend a few hours on it - not just to answer your question, but also as a form of geek-entertainement. I have to report that this is probably not going to work as straight-forward as you may have expected it.

First, I got it working fine in Mozilla-based browsers for single list elements, and it's actually pretty cool to click on a list element and be able to drag it to the other list - I even painted the list element itself next to the mouse pointer.

Then the problems started. When testing the finished code in IE, it turned out that the build-in event handler that actually changes the selections of the list gets executed AFTER the event is passed to my custom event handler. So when a user holds down the mouse button on an element in that list, that list's selectedIndex property is not updated when I read it. I tried some hackery with delayed evaluation of the list's selected items, but I would have to delay over 500 ms for that to work, and that makes the whole thing unusable from an interface-experience-perspective. Moreover, the <option> tag in IE does NOT support the onMouseDown event, which was what made it work in Firefox/Mozilla. There may be a possibility with some other hackery to get it working for a single element, but that was not what you wanted anyway.

You wanted drag and drop on multiple elements. Although I was able to write the logic for that to happen in Mozilla & Co., the user will never be able to do it and here is why: When you give a list field the ability to have multiple options selected, you can perform this selection by holding the mouse down and moving it accross the items you want to select. Unfortunately, that is the same process you would use to get it dragged. So everytime you try to grab on to a selection, instead of you being able to drag it, the browser will just start a new selection. I was not able to simply cancel the event after I handled it in Mozilla, and because of IE being screwed up with the simple stuff, I did try there either.

Although the idea is great, its implementation may prove more difficult. There is an entirely different approach that would be much easier to implement and could be made to work cross-browser fairly easily. Instead of using a real form field list element, a scrollable list could be simulated with a <div> containing <span>s or <p>s and having its overflow property set to auto, making sure none of the contents in the div can be wider than the div itself. The simulation of the list-behavior would be handled entirely in JavaScript, updating hidden form fields with the actual internal values for which items are in which list. Let me know whether you think this approach would be worth your 500 points and I give it a try.

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta


Já tem conta? Inicie sessão aqui.

Entrar Agora


Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade