Drag/Drop mit onmouseup -

[Anna Bolika]

Ich habe ein merkwürdiges Problem und komme nicht weiter. Ist was total billiges. Eigentlich.

Ich möchte ein sehr einfaches Drag&Drop realisieren. Muss nicht "schön" sein, soll nur funktionieren. Ich möchte dazu gern ein <a>-Element auf ein anderes bewegen und dort loslassen.

Im Code unten geht es erst mal nur um das Loslassen. Das funktioniert komischerweise aber nur über 1-3 Elemente. Ziehe ich das per Drag ausgewählte Element weiter als drei Zeilen, geht es nicht mehr. Getestet in aktuellem Chrome/Firefox.

Bin sowas von ratlos. Ihr seht ja, gebe mich schon mit nem billigen alert() zufrieden. Am return false liegt es nicht. Und ich hatte auch bereits eine Version mit Aufruf über den eventhandler probiert. Gleiches Problem.

Hat irgendjemand eine Idee?

<ul>
        <li><a 	onmouseup="alert(1); return false;" 	href="#">Eintrag #1</a></li>
        <li><a 	onmouseup="alert(2); return false;" 	href="#">Eintrag #2</a></li>
        <li><a 	onmouseup="alert(3); return false;" 	href="#">Eintrag #3</a></li>
        <li><a 	onmouseup="alert(4); return false;" 	href="#">Eintrag #4</a></li>
        <li><a 	onmouseup="alert(5); return false;" 	href="#">Eintrag #5</a></li>
        <li><a 	onmouseup="alert(6); return false;" 	href="#">Eintrag #6</a></li>
        <li><a 	onmouseup="alert(7); return false;" 	href="#">Eintrag #7</a></li>
        <li><a 	onmouseup="alert(8); return false;" 	href="#">Eintrag #8</a></li>
        <li><a 	onmouseup="alert(9); return false;" 	href="#">Eintrag #9</a></li>
        <li><a 	onmouseup="alert(10); return false;" 	href="#">Eintrag #10</a></li>
</ul>

 

[CPoly]

Erst mal solltest du das standard Verhalten des Browser unterbinden (man kann die Links ja nativ in die Adressleiste ziehen).

ondragstart="return false;"

Jetzt wird bei mir immer das mouseup-Event ausgelöst (aber natürlich auf dem Element, wo die Maus gerade ist. Nicht das, wo die Maus runter ging).

 

[Anna Bolika]

Mein Held!

Vielen Dank. Schon klar, mit "wo die Maus runter ging".

Das vollständige - oder sagen wir besser "ausreichende" Kunstwerk sieht folgendermaßen aus:

        <li><a 	ondragstart="i = <?php echo $i ?>; return false;" onmouseup="alert(i + ' zu ' +<?php echo $i; ?>); return false;" 	href="#">Eintrag #<?php echo $i; ?></a></li>

Nachdem das aber nicht ging, hatte ich es erst mal abgespeckt. Aber was ich vorhabe, scheine ich so umsetzen zu können.

 

[CPoly]

dragstart gibt es nicht in jedem Browser. Du solltest dafür mousedown benutzen und dragstart lediglich verhindern.

 

[Anna Bolika]

JavaScript macht mich manchmal ein bißchen weich mit seinen Tücken.

Ich hab nun bei ondragstart lediglich das return false drin und was oben bei ondragstart steht als onmousedown ausgewiesen. Schaun wir mal, ob das später auch mit richtigen IDs klappt

Vielen Dank jedenfalls nochmal.