zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden [JavaScript] Drag&Drop SelectBox - Fehler bei onmousedown

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.10.2009, 12:09
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.01.2009
Beiträge: 103
GrayFox befindet sich auf einem aufstrebenden Ast
Standard [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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>Javascript Labor</title>

        <script type='text/javascript' src='base.js'></script>
        <link rel='stylesheet' type='text/css' href='css/style.css'>
        
    </head>
    
    <body onmousedown='startDrag()' onmouseup='stopDrag()' onmousemove=''>
    
        <!--<select id='list' size='5' onmouseup="alert('test')">-->
        <form action='<?=$_SERVER['PHP_SELF'];?>' method='POST'>
            <span>ID:</span><input type='text' id='startDragId' value = '' /><br />
            <span>Value:</span><input type='text' id='dragValue' value = '' />
            <h3>Drag &amp; Drop</h3>
            <p>
                <select id='list' size='5' onmouseover='setDragFocus(this)' onmouseout='delDragFocus(this)' style='margin-right: 30px;'>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                    <option value='4'>4</option>
                    <option value='5'>5</option>
                </select>
                
                <select id='list2' size='5' onmouseover='setDragFocus(this)' onmouseout='delDragFocus(this)'>
                    <option value='1'>1</option>
                </select>
            </p>
            <h3>Verschieben von Einträgen</h3>
            <p>
                <select id='list3' size='5'>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                    <option value='4'>4</option>
                    <option value='5'>5</option>
                </select>
                <input type='button' onclick="switchPosition('up')" value='Hoch' />
                <input type='button' onclick="switchPosition('down')" value='Runter' />
            </p>
        </form>
    </body>
</html>
base.js:

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.10.2009, 17:58
Benutzerbild von Pr0g
(^.^)
XHTMLforum-Mitglied
 
Registriert seit: 23.08.2005
Ort: Düsseldorf
Beiträge: 535
Pr0g wird schon bald berühmt werden
Standard

Ich könnte mir vorstellen, dass es mit den Select Fehlern problematisch wird, da diese den Fokus behalten, während du die Maus gedrückt hälst. Ich würde statt dem Drag & Drop einfach zwei Buttons / Icons zwischen die Listen setzen mit welchen alle markierten Einträge aus einer Liste in die andre verschoben werden.
__________________
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.10.2009, 19:26
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.01.2009
Beiträge: 103
GrayFox befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Pr0g Beitrag anzeigen
Ich könnte mir vorstellen, dass es mit den Select Fehlern problematisch wird, da diese den Fokus behalten, während du die Maus gedrückt hälst.
Das leuchtet ein.

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 würde statt dem Drag & Drop einfach zwei Buttons / Icons zwischen die Listen setzen mit welchen alle markierten Einträge aus einer Liste in die andre verschoben werden.
Diese Variante hatte ich ganz am Anfang (andere Seite) schon implementiert. Jetzt wollte ich mich an der Drag&Drop Geschichte versuchen.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.10.2009, 19:34
Benutzerbild von Pr0g
(^.^)
XHTMLforum-Mitglied
 
Registriert seit: 23.08.2005
Ort: Düsseldorf
Beiträge: 535
Pr0g wird schon bald berühmt werden
Standard

Muss es denn eine Selectbox sein? Sonst könntest du dir selbst was basteln - mit Drag & Drop - nur wird dann wohl JS schon bei der einfachen Auswahl erforderlich sein...
__________________
Mit Zitat antworten
  #5 (permalink)  
Alt 04.10.2009, 19:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 05.01.2009
Beiträge: 103
GrayFox befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:00 Uhr.