Das beste HTML5 Drag and Drop-Tutorial im Jahr 2024. In diesem Tutorial können Sie Drag and Drop,Browser-Unterstützung,HTML5 Drag and Drop Beispiele,Beispiele,Element wird fallen,Ziehen Was - onDragStart und setData (),Wo setzen - OnDragOver,Platziert werden - ondrop,Weitere Beispiele, lernen
Drag & Drop (Ziehen und Ablegen) ist Teil der HTML5-Standard.
W3cschool Symbol und es auf das Rechteck ziehen.
Drag & Drop ist ein gemeinsames Merkmal, das auf einem anderen Ort nach dem Objekt zu kriechen ist.
In HTML5, Drag & Drop ist ein Standard-Bestandteil jedes Element ziehen können.
Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützt Drag.
Hinweis: Safari 5.1.2 nicht ziehen nicht unterstützt.
Das folgende Beispiel ist eine einfache Drag & Drop-Beispiel:
Es mag ein wenig kompliziert erscheinen, aber wir waren in der Lage verschiedene Teile des Drag zu studieren und Ereignisse fallen.
Erstens, um das Element ziehbar zu machen, setzen Sie das Attribut draggable auf true:
Dann, wenn das Element Bestimmung gezogen wird, was passieren wird.
In dem obigen Beispiel ruft onDragStart Attribut eine Funktion, Drag (Ereignis), die die gezogenen Daten definiert.
dataTransfer.setData () Methode, um den Datentyp und Wert geschleppt Daten einzustellen:
In diesem Beispiel ist der Datentyp "Text" ist, ist der Wert ziehbare Element id ( "drag1").
OnDragOver angegebene Ereignis, wo die Daten gespeichert werden hineingezogen zu werden.
Standardmäßig können Sie die Daten nicht / Elemente in andere Elemente platzieren. Wenn Sie einrichten müssen ermöglicht es Ihnen, zu platzieren, müssen wir die Standardbehandlung des Elements zu verhindern.
Tun Sie dies durch den Aufruf OnDragOver Ereignis Event.preventDefault () -Methode:
Wenn gezogenen Daten platziert, Drop-Ereignis eintritt.
In dem obigen Beispiel ondrop Attribut eine Funktion aufruft, fallen (event):
Code Erläuterung:
Ziehen Sie das Bild hin und her
Wie zu ziehen und Bilder zwischen zwei <div> Elemente fallen.