[amdXP]

Hi Leute

Ich muss für ein Projekt eine Drag&Drop Lösung in Javascript machen. Da ich nicht sehr viel Ahnung von JS habe, hab ich im Internet nach Beispielen gesucht und versucht diese an mein Projekt anzupassen.
Einpaar Angaben von meinem Projekt: Ich habe da Zwei Select-Boxen und ich muss die Optionen von einer Select-Box in die andere schieben. Mit Buttons geht das ja ganz einfach, nur nicht so ganz als Drag&Drop.
Der Code den ich bis jetzt habe funktioniert zwar, aber nicht das man eine Option von einer Select-Box in die andere verschieben kann, und die dann gut eingereiht ist. Hier ist mal der Code den ich bis jetzt habe, und danke schon mal für die Antworten.

HTML Teil

<form name="TestForm">
<select id="sel1" name="nichtverwendet" size="10">
<option class ="drag" value="1">1</option>
<option class ="drag" value="2">2</option>
<option class ="drag" value="3">3</option>
<option class ="drag" value="4">4</option>
<option class ="drag" value="5">5</option>
<option class ="drag" value="6">6</option>
</select>
<select id="sel2" name="verwendet" size="10">
<option class="drag" value="11">11</option>
<option class="drag" value="12">12</option>
<option class="drag" value="13">13</option>
<option class="drag" value="14">14</option>
<option class="drag" value="15">15</option>
<option class="drag" value="16">16</option>
</select>
</form>

<pre id="debug"> </pre>

JavaScript Teil

<script LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

	// maus start position
	var _startX = 0;
	var _startY = 0;
	// offset vom derzeitigen Element
	var _offsetX = 0;
	var _offsetY = 0;
	var _dragElement; 
	var _oldZindex = 0; // wenn gedragt wird geht der z-Index temporär in die Höhe
	var _debug = $('debug'); // beschreibt wenn ein Objekt gedragt wird oder nicht
	
	initDragDrop();
	
	function initDragDrop(){
		document.onmousedown = OnMouseDown;
		document.onmouseup = OnMouseUp;
	}

	function OnMouseDown(e){
		// MSIE überibt kein Event-Objekt
		if(e == null)
			e = window.event;
		// MSIE verwendet scrElement, andere verwenden target um auf ein HTML Element zu zugreifen
		var target = e.target != null ? e.target : e.srcElement;
		//_debug.innerHTML = target.tagName == 'OPTION' ? 'draggable element clicked' : 'non-clickable element clicked';
		_debug.innerHTML = target.className == 'drag' ? 'draggable element clicked' : 'non-clickable element clicked';
		// MSIE links klick = 1, firefox links klick = 0
		if((e.button == 1 && window.event != null || e.button == 0) && target.tagName == 'OPTION'){
			// Maus Position holen
			if(e.pageX || e.pageY){
				_startX = e.pageX; 
				_startY = e.pageY;
			}
			else if(e.clientX || e.clientY){
				for(var i = 0; i<document.TestForm.nichtverwendet.length; i++){
					_startX = e.clientX + document.body.scrollLeft
								+ document.TestForm.nichtverwendet.options[i].selected.clientLeft;
					_startY = e.clientY + document.body.scrollTop
								+ document.TestForm.nichtverwendet.options[i].selected.clientTop;
				}

			}
			// hole die Position des geklickten Element
			_offsetX = ExtractNumber(target.style.left);
			_offsetY = ExtractNumber(target.style.top);
			// geklicktes Element nach vorne bringen
			_oldZindex = target.style.zIndex;
			target.style.zIndex = 10000;
			// Greife auf das Element in der Funktion OnMouseMove zu 
			_dragElement = target;
			// Start der Bewegung
			document.onmousemove = OnMouseMove;
			// Text Selektierung aufheben
			document.body.focus;
			// das gleiche im MSIE
			document.oneselectstart = function(){return false;}
			// verhindere Text Selektion
			return false;
		}
	}
	
	function ExtractNumber(value){
		var n = parseInt(value);
		return n == null || isNaN(n) ? 0 : n;
	}
	
	function OnMouseMove(e){
		if(e == null)
			var e = window.event;
		// Drag-Code
		var mousePos = mouseCoords(e);
	}
	
	
	function mouseCoords(e){
		if(e.pageX || e.pageY){
			_dragElement.style.left = (_offsetX + e.pageX - _startX) + 'px';
			_dragElement.style.top = (_offsetY + e.pageY - _startY) + "px";
		}
		else if(e.clientX || e.clientY){
			_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
			_dragElement.style.top = (_offsetY + e.clientY - _startY) + "px";
		}
	}
	
	
	
	function OnMouseUp(e){
		if(_dragElement != null){
			_dragElement.style.zIndex = _oldZindex;
			// Bis zum nächsten onmousedown sind wir fertig mit den Events
			document.onmousemove = null;
			document.oneselectstart = null;
			// Wir draggen nicht mehr
			_dragElement = null;
		}
	}
	
	
	
	function $(id){
		return document.getElementById(id);
	}
//-->
</SCRIPT>