Heim > Artikel > Web-Frontend > HTML5 Drag & Drop (Drag & Drop) ausführliche Erklärung und Beispiele
Einführung
Drag-and-Drop ist eine gängige Funktion, bei der Sie ein Objekt greifen und es dann an eine andere Stelle ziehen.
In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden.
Klicken Sie zuerst auf ein kleines Beispiel: Führen Sie JavaScript aus, wenn der Benutzer mit dem Ziehen des
-Elements beginnt
<p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
Tipp: Links und Bilder sind standardmäßig ziehbar und erfordern kein Ziehen Attribut .
Definition und Verwendung
löst die folgenden Ereignisse während des Drag-and-Drop-Vorgangs aus:
Lösen Sie das Ereignis auf dem Drag-Ziel (Quellelement) aus:
ondragstart – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt
ondrag – wird ausgelöst, wenn das Element gezogen wird
ondragend – wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements fertig ist
wird ausgelöst, wenn das Ziel wird freigegeben:
ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in den Geltungsbereich seines Containers gelangt
ondragover – Wenn ein gezogenes Objekt in den Geltungsbereich eines anderen gezogen wird Container des Objekts Dieses Ereignis auslösen
ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Bereich seines Containers verlässt
ondrop – Dieses Ereignis wird ausgelöst, wenn die Maustaste währenddessen losgelassen wird ein Ziehvorgang
Browser-Unterstützung
Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.
Hinweis: Safari 5.1.2 unterstützt das Ziehen nicht; beim Ziehen eines Elements wird das Ondragover-Ereignis alle 350 Millisekunden ausgelöst.
Beispiel
Veröffentlichen Sie zuerst den Code und erklären Sie ihn dann einzeln:
<!DOCTYPE html> <html> <head> <title>HTML5拖拽</title> <meta charset="utf-8"> <style> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> </head> <body> <p>拖动img_w3slogo.gif图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56"> <script> function allowDrop(ev){ ev.preventDefault(); } function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
Der Seiteneffekt vor dem Ziehen ist:
Lassen Sie uns die Bedeutung des obigen Codes separat analysieren.
Stellen Sie das Element so ein, dass es ziehbar ist
Um das Element ziehbar zu machen, setzen Sie zunächst das Attribut „draggable“ auf „true“:
<img draggable="true">
Was gezogen werden soll – ondragstart und setData( )
Anschließend geben Sie an, was passiert, wenn das Element gezogen wird.
Im obigen Beispiel ruft das Attribut ondragstart eine Funktion, Drag(event), auf, die die zu ziehenden Daten angibt.
Die Methode dataTransfer.setData() legt den Datentyp und den Wert der gezogenen Daten fest:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
In diesem Beispiel ist der Datentyp „Text“ und der Wert gilt für die ziehbaren Daten Element-ID("drag1").
Wo platziert werden – ondragover
Das ondragover-Ereignis gibt an, wo die gezogenen Daten platziert werden sollen.
Standardmäßig können Daten/Elemente nicht in anderen Elementen platziert werden. Wenn wir die Platzierung zulassen müssen, müssen wir die Standardbehandlung des Elements verhindern.
Dies geschieht durch Aufrufen der event.preventDefault()-Methode des ondragover-Ereignisses:
event.preventDefault()
für Platzierung - ondrop
Wenn die gezogenen Daten platziert werden, wird die Drop-Ereignis wird eintreten.
Im obigen Beispiel ruft das ondrop-Attribut eine Funktion auf, drop(event):
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
Codeerklärung:
Rufen Sie präventDefault() auf, um die Browser-Standardeinstellung zu vermeiden Verarbeitung von Daten (das Standardverhalten des Drop-Ereignisses besteht darin, es als Link zu öffnen)
Rufen Sie die gezogenen Daten über die Methode dataTransfer.getData("Text") ab. Diese Methode gibt jeden Datensatz in den gleichen Typ wie in der setData()-Methode zurück.
Die gezogenen Daten sind die ID des gezogenen Elements ("drag1")
Das gezogene Element an das Platzierungselement (Zielelement) anhängen
Das Ergebnis der Implementierung ist wie in der Abbildung gezeigt:
DataTransfer-Objekt
Während des Ziehvorgangs können wir das DataTransfer-Objekt verwenden, um Daten zu übertragen, sodass die Daten übertragen werden können übertragen, wenn der Ziehvorgang endet. Führen Sie andere Vorgänge aus.
Objekteigenschaften:
dropEffect: Legt das Drag-and-Drop-Verhalten fest, das auf dem Drag-and-Drop-Ziel auftreten darf, oder gibt es zurück. Wenn das hier festgelegte Drag-and-Drop-Verhalten nicht mehr zu den mehreren Drag-and-Drop-Verhaltensweisen gehört, die durch die Eigenschaft effectAllowed festgelegt wurden, schlägt der Drag-and-Drop-Vorgang fehl. Der Attributwert darf nur einer der vier Werte „null“, „copy“, „link“ und „move“ sein.
effectAllowed: Legt das zulässige Ziehverhalten für das gezogene Element fest oder gibt es zurück. Die Eigenschaftswerte können auf „none“, „copy“, „copyLink“, „copyMove“, „link“, „linkMove“, „move“, „all“ und „uninitialized“ gesetzt werden.
items: Diese Eigenschaft gibt das DataTransferItems-Objekt zurück, das die Drag-Daten darstellt.
types: Dieses Attribut gibt ein DOMStringList-Objekt zurück, das alle in dataTransfer gespeicherten Datentypen enthält.
Objektmethode:
setData(format,data): Weisen Sie dem dataTransfer-Objekt Daten im angegebenen Format zu. Der Parameter format definiert das Format der Daten, also den Datentyp. und data sind die zuzuweisenden Daten.
getData(format): Daten im angegebenen Format aus dem dataTransfer-Objekt abrufen.
clearData([format]): Daten im angegebenen Format aus dem dataTransfer-Objekt löschen. Wenn nicht angegeben, werden alle Daten im Objekt gelöscht.
addElement(element): Fügen Sie ein benutzerdefiniertes Symbol hinzu
setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。
Identify what is draggable
function dragstart_handler(ev) { console.log("dragStart"); // Add the target element's id to the data transfer object ev.dataTransfer.setData("text/plain", ev.target.id); } <body> <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p> </body>
Define the drag's data
function dragstart_handler(ev) { // Add the drag data ev.dataTransfer.setData("text/plain", ev.target.id); ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>"); ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org"); }
Define the drag image
function dragstart_handler(ev) { // Create an image and then use it for the drag image. // NOTE: change "example.gif" to an existing image or the image // will not be created and the default drag image will be used. var img = new Image(); img.src = 'example.gif'; ev.dataTransfer.setDragImage(img, 10, 10); }
Define the drag effect
function dragstart_handler(ev) { // Set the drag effect to copy ev.dataTransfer.dropEffect = "copy"; }
Define a drop zone
function dragover_handler(ev) { ev.preventDefault(); // Set the dropEffect to move ev.dataTransfer.dropEffect = "move" } function drop_handler(ev) { ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } <body> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div> </body>
火狐浏览器拖拽问题
但是进行到这儿在火狐浏览器中发现一个问题:
html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下不管用?
解决办法:
document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); }
更多HTML5 拖放(Drag 和 Drop)详解与实例相关文章请关注PHP中文网!