Für das Drag and Drop müssen zusätzliche EventListener erzeugt werden.
In der Funktion initiate wurde für das Ziel-Div (bildgross) das Standardverhalten des Browsers ausgeschaltet und für den Fall
des Objekt loslassens die Funktion loslassen definiert.
////////////////////////////////////////////////////////////////////////////////////
// EventListener für Drag and Drop
var ve_div = document.getElementById("bildgross"); // div für das große Bild
ve_div.addEventListener("dragenter", function(e) { e.preventDefault(); }, false); // Standardverhalten des Browsers ausschalten
ve_div.addEventListener("dragover", function(e) { e.preventDefault(); }, false); // Standardverhalten des Browsers ausschalten
ve_div.addEventListener("drop", loslassen, false); // Funktionsaufruf, wenn das Bild im div losgelassen wird
Beim Anzeigen der Bilderliste wird für jedes Bild ein EventListener für das Starten des Ziehens definiert.
document.getElementById("bild"+v_i).addEventListener("dragstart", ziehen, false); // Eventlistener für ziehen setzen
In der Funktion ziehen wird der Name des Bildes aus dem gezogenen Bild ausgelesen und in das dataTransfer Objekt gestellt.
Das ist auch das Standadverhalten des Browsers.
In der Funktion loslassen wird der Name des Bildes aus dem dataTransfer Objekt gelesen und als Attribut dem Bild hinzugefügt.
Auch hier muss das Standardverhalten des Browsers ausgeschaltet werden.
In diesem Beispiel ist im linken Fenster eine Tabelle enthalten, aus der man Zeilen in das rechte Fenster ziehen kann.
Feld 1/1
Feld 1/2
Feld 1/3
Feld 2/1
Feld 2/2
Feld 2/3
Feld 3/1
Feld 3/2
Feld 3/3
Damit eine Tabellenzeile überhaupt gezogen werden kann muss sie das Attribut draggable="true" erhalten.
Jede Tabellenzeile hat eine ID textQuelle01, textQuelle02 usw." erhalten.
Jeder Tabellenzeile wird ein Eventlistener für das Ziehen zugeordnet.
document.getElementById("textQuelle01").addEventListener("dragstart", textZiehen, false); // Eventlistener für ziehen setzen
document.getElementById("textQuelle02").addEventListener("dragstart", textZiehen, false); // Eventlistener für ziehen setzen
document.getElementById("textQuelle03").addEventListener("dragstart", textZiehen, false); // Eventlistener für ziehen setzen
Für die Übergabe der Werte gibt es zwei Möglichkeiten.
Bei der ersten Variante wird die ID der Tabellenzelle übergeben. In der Funktion textLoslassen wird mit dieser ID in der
Quelltabelle gelesen und in die Zieltabelle übernommen.
Bei der zweiten Variante wird der Inhalt der Tabellenzellen übergeben. In der Funktion textLoslassen wird dieser Text
in die Zieltabelle geschrieben.
Die zweite Variante ist besser, da damit auch einfacher fensterübergreifend gearbeitet werden kan.
In diesem Beispiel kann jede Zeile der Tabelle mit der Maus an eine neue Position gezogen werden.
Genau so kann natürlich auch mit einer Liste gearbeitet werden.
Zur Erstellung der Tabelle wird die Funktion reihenfolgeTabErstellen aufgerufen.
Diese Funktion entspricht der Erstellung einer Tabelle aus einer DB-Abfrage.
Es wird eine Tabellenzeile erzeugt. Diese Zeile bekommt die ID reihenfolge- + Zeilennummer. (reihenfolge-0, reihenfolge-1 . . .).
Damit eine Tabellenzeile überhaupt gezogen werden kann muss sie das Attribut draggable="true" erhalten.
Mit den Eventlistenern dragenter und dragover wird das Standardverhalten des Browsers abgeschaltet.
Mit dem Eventlistener dragstart wird die Funtion reihenfolgeZiehen aufgerufen.
In dieser Funktion werden die Werte aus der Quell-Zeile in das Datatransfer-Objekt übergeben.
Mit dem Eventlistener drop wird die Funtion reihenfolgeLoslassen aufgerufen.
In dieser Funktion werden zunächst die Zeilen zwischen dem Ziel und der Quelle um eins nach hinten verschoben.
Dann werden die Daten aus dem Datatransfer-Objekt in die Zielzellen geschrieben.
Die IDs der Zeilen und Zellen ändern sich nicht, da nur der Inhalt der Zellen geändert wird.
