Drag & Drop mit <tr> ?!

ev0lst

Erfahrenes Mitglied
Hallo.

Ich würde gerne mal etwas probieren in Sachen Drag & Drop. Dabei soll man eine ganze Zeile <tr> samt <td>'s mit der Maus positionieren können.

Danach soll es eine Auswertung mit AJAX geben (mehr dazu später).

Wie kann man sowas machen und auch so dass es in allen Browsern funktioniert...?

Danke
 
Danke für den Link.

Stellt sich die Frage ob man damit den besagten Schritt weiter gehen kann...
Dieser sieht so aus, dass man via AJAX ein "item" in ein Feld ziehen kann, was danach gelöscht wird (mit mysql).

Gibt es dazu bereits Denkansätze?
 
Die TR | TD wirst Du in der Tat nun nicht verschieben können , aber das brauchst auch nicht. Es würde in der Tat reichen sich einfach den kompletten Inhalt der Tabellen Zelle in ein DIV zu clonen mit cloneNode.

Dann hast halt irgendwo ne Drop Zone deren Koordinaten gespeichert werden.

Um das mal grob anzuschneiden , man legt einen Event Handler auf ein Element onmousedown. Onmousemove und Onmouseup Eventhandler legst Du selber auf das gesammte Dokument.

Wenn man mit Onmousedown auf ein Element klickt ist es ja nun keine Schwierigkeit diesen Inhalt in einen Hilfslayer zu kopieren mittels Clonenode. Dieser Hilfslayer selber hat eine absolute Positionierung und bekommt dann den Inhalt vom Element welches wir eben angeklickt haben.
Und dieser besagte Hilfslayer wird dann verschoben , somit umgehen wir gleich das Problem mit dem zIndex Bug des IE.

Des weiteren richten wir eine Drop Zone ein , deren Koordinaten wir uns speichern , sobald die Maus sich bewegt kann man nun nicht wirklich sagen ob wir eben über diese besagten Drop Zone sind.Aber Anhand der Koordinaten des Mauszeigers + höhe, weite, startpunkt x und startpunkt y des Hilfslayers kann man es schon gut festmachen ob man sich über einer so genannten Drop Zone befindet.

Sollten wir nun die Maus loslassen und uns über so einer Zone befinden lassen wir eben besondere Ereignisse einspielen , wenn dem nicht der Fall sei nunja dann halt nicht ;)

Hier auch nochmal nen gut erklärtest Tutorial wie ich finde zu dieser ganzen Problematik.

http://www.webreference.com/programming/javascript/mk/column2/index.html
 

Neue Beiträge

Zurück