Tweet
Hallo!
Ich möchte für ein Bilderscript einen Javascript schreiben, mit dem man Bilder per Drag'n Drop sortieren kann.
Dafür soll man das zu verschiebene Bild anklicken (Maus gedrückt halten) und dann auf ein anderes ziehen können. Später soll dann das zuerst angeklickte Bild hinter (oder vor, das muss ich mir noch überlegen) dem Bild landen, auf dem man die Maus wieder losgelassen hat.
Das ganze sieht bisher folgendermaßen aus:
Das ganze funktioniert auch im Prinzip. Wenn man auf ein Bild klickt und die Maus wieder loslässt (ohne sie bewegt zu haben!!!!), dann wird einem zweimal die id des betreffenden Bildes ausgegeben. Wie schon angedeutet funktioniert es aber nicht mehr, sobald man die gedrückte Maus auch nur einen Millimeter bewegt. Dann verwandelt sich der Mauszeiger in ein "Verbotsschild" (durchgetrichener Kreis) und beim hochlassen der Maustaste passiert gar nichts mehr!
Zum Testen habe ich Firefox 2.0 verwendet. Hat jemand ne Ahnung, wie man dieses Problem lösen kann??
Wär echt dankbar für Hilfe, denn beim googlen habe ich leider nichts gefunden!
Ich möchte für ein Bilderscript einen Javascript schreiben, mit dem man Bilder per Drag'n Drop sortieren kann.
Dafür soll man das zu verschiebene Bild anklicken (Maus gedrückt halten) und dann auf ein anderes ziehen können. Später soll dann das zuerst angeklickte Bild hinter (oder vor, das muss ich mir noch überlegen) dem Bild landen, auf dem man die Maus wieder losgelassen hat.
Das ganze sieht bisher folgendermaßen aus:
PHP-Code:
//globale Variable, die die ID's der betroffenen Bilder
speichern
var downimg;
var upimg;
//Diese Funktion soll zunächst nur die Positionen der
beiden betroffenen Bilder ausgeben
function changepos () {
window.alert (downimg);
window.alert (upimg);
}
//Handlerfunktion für das mousedown-Event
function mdown (id) {
if (id) {
downimg = id;
}
}
//Handlerfunktion für das mouseup-Event
function mup (id) {
if (downimg && id) {
upimg = id;
changepos ();
}
}
Im Body steht folgender Html-Code (vereinfacht):
<table>
<tr>
<td>
<img src="xxx.jpg" id="1" onmousedown="mdown(this.id)" onmouseup="mup(this.id)">
</td>
<td>
<img src="yyy.jpg" id="2" onmousedown="mdown(this.id)" onmouseup="mup(this.id)">
</td>
</tr>
</table>
Zum Testen habe ich Firefox 2.0 verwendet. Hat jemand ne Ahnung, wie man dieses Problem lösen kann??
Wär echt dankbar für Hilfe, denn beim googlen habe ich leider nichts gefunden!
)
Kommentar