Für eine lange Zeit haben JavaScript-Funktionen existiert, die es uns erlauben, Drag-and-Drop-Schnittstellen zu erstellen, aber keine dieser Implementierungen war nativ für den Browser.
In HTML5 haben wir eine native Methode zum Erstellen von Drag & Drop-Schnittstellen (mit ein wenig Hilfe von JavaScript).
Ich werde Ihnen sagen, wie Sie das erreichen können ...
Ich möchte das aus dem Weg räumen, bevor wir fortfahren: Zur Zeit wird HTML5 Drag and Drop von allen gängigen Desktop-Browsern unterstützt (einschließlich IE (sogar IE 5.5 hat teilweise Unterstützung)), aber es wird derzeit von keinem der beliebten Handys unterstützt Browser.
In jedem Stadium der Drag & Drop-Operation wird ein anderes Ereignis ausgelöst, damit der Browser weiß, welcher JavaScript-Code ausgeführt werden soll. Die Ereignisse sind:
Mit all diesen Event-Listenern haben Sie eine Menge Kontrolle darüber, wie Ihre Oberfläche funktioniert und wie sie unter verschiedenen Umständen funktioniert.
Hier findet all die Drag and Drop-Magie statt. Dieses Objekt enthält die Daten, die von der Ziehoperation gesendet wurden. Die Daten können auf verschiedene Arten gesetzt und abgerufen werden, die wichtigsten sind:
Jetzt werden wir anfangen, unsere zu erstellen einfaches Drag & Drop Beispiel, Sie können sehen, dass wir zwei kleine divs haben und eine größere, wir können die Kleinen in die Große ziehen und ablegen und wir können sie sogar zurück bewegen.
Das erste, was wir tun müssen, ist unser HTML zu erstellen. Wir machen die divs mit dem ziehbaren Attribut wie folgt ziehbar:
draggable="true">Wenn dies erledigt ist, müssen wir die JavaScript-Funktion definieren, die ausgeführt wird, wenn wir dieses Element ziehen:
function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);return true;}In diesem Code deklarieren wir zuerst, welche Art von Effekt wir in der Operation erlauben und setzen diese, um zu bewegen, in der zweiten Zeile setzen wir die Daten für die Operation und in diesem Fall ist der Typ Text und der Wert ist die ID des Elements wir schleifen. Danach verwenden wir die Methode setDragImage , um festzulegen , was wir ziehen werden und wo sich der Cursor befindet, wenn Sie ziehen, und da die Cubes 200 x 200 Pixel groß sind , platziere ich das genau in der Mitte. Endlich kehren wir wahr zurück.
Damit ein Element einen Drop akzeptieren kann, muss es 3 verschiedene Events anhören: dragEnter, dragOver und auch das Drop- Event. Lassen Sie uns das also zu unserem html im div mit der ID of big hinzufügen:
Jetzt, da wir Event-Listener hinzugefügt haben, müssen wir diese Funktionen erstellen, die wir mit den Dragenter- und Dragover-Events beginnen:
function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}In der ersten Funktion definieren wir, was wir tun wollen, wenn das Element, das wir ziehen, das Element erreicht, in das es eingefügt werden soll. In diesem Fall verhindern wir nur das Standardverhalten des Browsers, aber Sie können eine beliebige Anzahl von Dingen ändern Hintergrund oder fügen Sie einen Text hinzu, um anzuzeigen, dass der Benutzer in den richtigen Bereich zieht, und verwenden Sie das Dragleave-Ereignis, um die vorgenommenen Änderungen rückgängig zu machen. Als nächstes verhindern wir in der dragOver- Funktion einfach, dass der Standardwert für das Ablegen berücksichtigt wird .
Im nächsten Teil definieren wir die Funktion, wenn wir das Element tatsächlich auf das gewünschte Ziel fallen lassen:
function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}In diesem letzten Teil setzen wir zuerst eine Variable namens data, in der wir alle Daten erhalten, die für das Textformat verfügbar sind, und dann fügen wir diese Daten (die das Element sind, das wir ziehen) an das div an, das wir löschen wollen das Element. Abschließend noch ein paar Feinheiten, wie das Stoppen der Fortpflanzung und auch das Zurückkehren zu false
Überprüfung die Demo Sie können sehen, dass wir auch sichergestellt haben, dass die beiden Divs an ihren ursprünglichen Ort zurückgeschleift werden können. Glücklicherweise ist das Hinzufügen eines anderen Drop-Ziels möglicherweise einfacher als Sie denken; Da die Funktionen bereits vorhanden sind, müssen wir lediglich die Ereignis-Listener hinzufügen:
Und das ist alles, was wir brauchen, um die Divs an den ursprünglichen Ort ziehen zu können.
Es gibt viele Drag & Drop-Anwendungen, die mit JavaScript-Bibliotheken erstellt wurden, und diese Bibliotheken sind oft einfacher zu verwenden. Aber ich hoffe, dass Sie in dieser HTML5 & JavaScript-Technik das zukünftige Potenzial der nativen Lösung sehen.
Haben Sie eine Drag & Drop-Schnittstelle erstellt? Wie vergleicht natives HTML5 mit reinen JavaScript-Lösungen? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Drop-Bild über Photophilde.