So verwenden Sie das Drag-and-Drop von HTML5

Es gibt schon seit langem JavaScript-Funktionen, mit denen wir Drag-and-Drop-Schnittstellen erstellen können, aber keine dieser Implementierungen war nativ im Browser.

In HTML5 verfügen wir über eine native Methode zum Erstellen von Drag-and-Drop-Schnittstellen (mit ein wenig Hilfe von JavaScript).

Ich werde Ihnen zeigen, wie Sie dies erreichen können …

Browserunterstützung

Bevor wir fortfahren, möchte ich dies klären: Derzeit wird HTML5 Drag & Drop von allen gängigen Desktop-Browsern unterstützt (einschließlich IE (sogar IE 5.5 bietet teilweise Unterstützung)), aber derzeit wird es von keinem der gängigen Mobilgeräte unterstützt Browser.

Ziehen Sie Ereignisse per Drag-and-Drop

In jeder Phase des Drag-and-Drop-Vorgangs wird ein anderes Ereignis ausgelöst, damit der Browser weiß, welcher JavaScript-Code ausgeführt werden soll; Die Veranstaltungen sind:

  • DragStart: Wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt.
  • dragEnter: wird ausgelöst, wenn das ziehbare Element zum ersten Mal über das Zielelement gezogen wird.
  • DragOver: Wird ausgelöst, wenn die Maus beim Ziehen über ein Element bewegt wird.
  • DragLeave: Wird ausgelöst, wenn der Cursor des Benutzers beim Ziehen ein Element verlässt.
  • ziehen: Wird jedes Mal ausgelöst, wenn wir die Maus während des Ziehens unseres Elements bewegen.
  • Drop: wird ausgelöst, wenn der eigentliche Drop durchgeführt wird.
  • dragEnd: Wird ausgelöst, wenn der Benutzer beim Ziehen des Objekts die Maus loslässt.

Mit all diesen Ereignis-Listenern haben Sie viel Kontrolle darüber, wie Ihre Schnittstelle funktioniert und wie sie sich unter verschiedenen Umständen genau verhält.

Lesen:  7 überzeugende Vorteile der Verwendung des Vue JS-Frameworks 2024

Das dataTransfer-Objekt

Hier passiert die ganze Drag-and-Drop-Magie. Dieses Objekt enthält die Daten, die durch den Ziehvorgang gesendet wurden. Die Daten können auf verschiedene Arten eingestellt und abgerufen werden, die wichtigsten sind:

  • dataTransfer.effectAllowed=value: Dies gibt die zulässigen Aktionstypen zurück. Mögliche Werte sind none, copy, copyLink, copyMove, link, linkMove, move, all und uninitialized.
  • dataTransfer.setData(format, data): fügt die angegebenen Daten und deren Format hinzu.
  • dataTransfer.clearData( format ): löscht alle Daten für ein bestimmtes Format.
  • dataTransfer.setDragImage(element, x, y): Legt das Bild fest, das Sie ziehen möchten. Die x- und y-Werte geben an, wo sich der Mauszeiger befinden soll (0, 0 platziert ihn oben links).
  • data = dataTransfer.getData(format) : Wie der Name schon sagt, werden die für ein bestimmtes Format verfügbaren Daten zurückgegeben.

Erstellen eines Drag-and-Drop-Beispiels

Jetzt beginnen wir mit der Erstellung unseres einfaches Drag-and-Drop-Beispiel, Sie können sehen, dass wir zwei kleine Divs und ein größeres haben. Wir können die kleinen Divs per Drag-and-Drop in das große Div ziehen und sie sogar nach hinten verschieben.

Ziehen des Objekts

Als erstes müssen wir unser HTML erstellen. Wir machen die Divs mit dem Draggable-Attribut ziehbar, etwa so:

draggable=”true”>

Wenn dies erledigt ist, müssen wir die Javascript-Funktion definieren, die ausgeführt wird, wenn wir mit dem Ziehen dieses Elements beginnen:

Funktion 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 zunächst, welche Art von Effekt wir in der Operation zulassen, und legen diesen fest bewegen, In der zweiten Zeile legen wir die Daten für die Operation fest und in diesem Fall den Typ Text und der Wert ist die ID des Elements, das wir ziehen. Danach verwenden wir die setDragImage Methode, um festzulegen, was wir ziehen und wo sich der Cursor beim Ziehen befindet. Da die Würfel 200 x 200 Pixel groß sind, habe ich sie genau in der Mitte platziert. Endlich kehren wir zurück WAHR.

Das Objekt fallen lassen

Damit ein Element einen Drop akzeptieren kann, muss es drei verschiedene Ereignisse abhören: DragEnter, DragOver und auch die fallen Ereignis, also fügen wir dies zu unserem HTML im div mit der ID „big“ hinzu:

Nachdem wir nun Ereignis-Listener hinzugefügt haben, müssen wir diese Funktionen erstellen. Wir beginnen mit den Dragenter- und Dragover-Ereignissen:

Lesen:  So ziehen Sie in einen anderen Staat um

Funktion DragEnter(ev) { ev.preventDefault(); return true; } function dragOver(ev) { ev.preventDefault(); }

In der ersten Funktion definieren wir, was passieren soll, wenn das Element, das wir ziehen, das Element erreicht, in das es abgelegt werden soll. In diesem Fall verhindern wir nur das Standardverhalten des Browsers, Sie können jedoch eine beliebige Anzahl von Dingen tun, wie z. B. das ändern Fügen Sie einen Hintergrund hinzu oder fügen Sie Text hinzu, um anzuzeigen, dass der Benutzer in den richtigen Bereich zieht. Mithilfe des Dragleave-Ereignisses können Sie die vorgenommenen Änderungen rückgängig machen. Als nächstes im drüber ziehen Funktion verhindern wir einfach die Standardeinstellung, um den Drop zu ermöglichen.

Im nächsten Teil definieren wir die Funktion, wann wir das Element tatsächlich auf dem gewünschten Ziel ablegen:

function dragDrop(ev) { var data = ev.dataTransfer.getData(“Text”); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); falsch zurückgeben; }

In diesem letzten Teil legen wir zunächst eine Variable namens „Daten“ fest, in der wir alle Daten erhalten, die für das Textformat verfügbar sind, und dann hängen wir diese Daten (das wird das Element sein, das wir ziehen) an das Div an, in das wir es einfügen möchten das Element. Zum Schluss noch ein paar letzte Handgriffe wie das Stoppen der Ausbreitung und auch die Rückgabe von false.

Den Abschnitt zu einem Drop-Ziel machen

Überprüfung die DemoWie Sie sehen, haben wir auch dafür gesorgt, dass die beiden Divs an ihre ursprüngliche Position zurückgezogen werden können. Glücklicherweise ist das Hinzufügen eines weiteren Drop-Ziels möglicherweise einfacher als Sie denken. Da die Funktionen bereits vorhanden sind, müssen wir nur noch die Ereignis-Listener hinzufügen, etwa so:

Lesen:  Flash-zentrierte Missverständnisse von HTML5 | WDD

Und das ist alles, was wir brauchen, um das Ziehen der Divs an die ursprüngliche Stelle zu ermöglichen.

Abschluss

Es gibt viele Drag-and-Drop-Anwendungen, die mit JavaScript-Bibliotheken erstellt wurden, und es ist oft einfacher, diese Bibliotheken zu verwenden. Aber ich hoffe, dass Sie in dieser HTML5- und JavaScript-Technik das zukünftige Potenzial der nativen Lösung erkennen.

Haben Sie eine Drag-and-Drop-Schnittstelle erstellt? Wie schneidet natives HTML5 im Vergleich zu reinen JavaScript-Lösungen ab? Lass es uns in den Kommentaren wissen.

Ausgewähltes Bild/Miniaturansicht, Bild über Photophilde ablegen.

Aktuelle Artikel:

Empfohlen