|
|||
[JavaScript] Drag&Drop SelectBox - Fehler bei onmousedown
Hi und Hallo
Ich versuche gerade - aus Spaß an der Freude - eine Drag&Drop Funktionalität für meine Selectboxen zu entwerfen. Im <body>-Tag notiere ich zwei Event-Handler onmousedown='startDrag()' und onmouseup='stopDrag()' In den entsprechenden <select>-Tags habe ich wiederum zwei Event-Handler onmouseover='setDragFocus(this)' und onmouseout='delDragFocus(this)' Mein Grundgedanke ist folgender: Wenn ich mit der Maus über eine Selectbox fahre, wird in ein Inputfeld die ID und in ein anderes Inputfeld der Wert der Selectbox eingetragen. Beim Verlassen des Elements werden beide Felder wieder geleert. Beim Loslassen der Maus prüfe ich mit JavaScript, ob das erste Inputfeldfeld einen Wert, sprich die ID, enthält. Dadurch weiß das Script, dass sich die Maus gerade über einer Selectbox befindet. Nun kann der Wert, der sich im zweiten Inputfeld befindet, in die Selectbox eingefügt werden - vorrausgesetzt die Maus befindet sich nicht mehr auf der gleicher Selectbox wie beim Start des Drags. Mein Problem: Wenn ich mit der Maus in eine Selectbox klicke und die Maus bewege, dann wird weder das onmouseout-Event der ersten Selectbox, noch das onmouseover-Event der zweiten Selectbox ausgeführt. Das Einzige, was passiert ist, dass ich beim Hoch- Runterfahren einen anderen Eintrag in der Selectbox markiere, was ich nicht möchte. Meine Frage: Kann ich dies irgendwie unterbinden? Test-URL & SourceCode Link: Javascript Labor index.php: PHP-Code:
HTML-Code:
function switchPosition(mode) { if(typeof(mode) == "undefined") { mode = 'down'; } var list = document.getElementById('list3'); var sIndex = list.selectedIndex; var sNewIndex = ""; var itemA = ""; var itemB = ""; if(sIndex != 0 && mode == 'up' || sIndex < list.length - 1 && mode == 'down') { sNewIndex = (mode == 'down') ? sIndex + 1 : sIndex - 1; itemAtext = list.options[sIndex].text; itemAvalue = list.options[sIndex].value; itemBtext = list.options[sNewIndex].text; itemBvalue = list.options[sNewIndex].value; list.options[sIndex].text = itemBtext; list.options[sIndex].value = itemBvalue; list.options[sNewIndex].text = itemAtext; list.options[sNewIndex].value = itemAvalue; list.selectedIndex = parseInt(sNewIndex); } } function startDrag(oj) { //document.getElementById('startDragId').value = oj.id; //document.getElementById('dragValue').value = oj.value; } function stopDrag(oj) { //startDragId = document.getElementById('startDragId').value //dragValue = document.getElementById('dragValue').value = oj.value; //if(startDragId != oj.id) { alert(dragValue); oj.options[0].text = dragValue; } var dragOj = document.getElementById(document.getElementById('startDragId').value); var dragValue = document.getElementById('dragValue').value; if(typeof(dragOj) != "undefined") { dragOj.options[0].text = dragValue; } document.getElementById('startDragId').value = ""; document.getElementById('dragValue').value = ""; } function setDragFocus(oj) { document.getElementById('startDragId').value = oj.id; document.getElementById('dragValue').value = oj.value; } function delDragFocus(oj) { document.getElementById('startDragId').value = ""; document.getElementById('dragValue').value = ""; } Vielen Dank im Vorraus |
Sponsored Links |
Sponsored Links |
|
|||
Zitat:
Da müsste ich mal schauen, ob ich es dan nicht anders realisiere oder ich es irgendwie schaffe den Fokus vom Element zu nehmen. Zitat:
|
|
|||
Ich wollte es einfach mal mit einer Select-Box ausprobieren. Zur Not habe ich noch die "Button"-Lösung.
Eigentlich könnte ich ja dann an meiner PHP-Listbox Klasse weiterarbeiten: Demo der ListBox Klasse Geändert von GrayFox (04.10.2009 um 19:50 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |