Drag and Drop
Drag and Drop ist eine häufige Funktion, bei der ein Objekt gegriffen und später an einen anderen Ort gezogen wird.
In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden.
Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen.
Hinweis:Safari 5.1.2 unterstützt kein Ziehen.
Beispiel:
<!DOCTYPE html> <html> <head> <title>拖放</title> <style type="text/css"> #p1{width:360px;height:220px;padding:20px;border:1px solid black;} </style> <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> </head> <body> <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p> <br /> <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" /> </body> </html>
Um das Element ziehbar zu machen, setzen Sie zunächst das dragable-Attribut auf true:
Geben Sie dann an, wann das Element gezogen wird , was geschieht.
Im obigen Beispiel ruft das ondragstart-Attribut eine Funktion, Drag(event), auf, die die zu ziehenden Daten angibt.
dataTransfer.setData()-Methode legt den Datentyp und den Wert der gezogenen Daten fest:
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
In diesem Beispiel , der Datentyp ist „Text“ und der Wert ist die ID des ziehbaren Elements („drag1“).
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()
Wenn die gezogenen Daten platziert werden, Es kommt zu einem Drop-Ereignis.
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)); }
Code-Erklärung:
Rufen Sie preventDefault() auf, um die Standardverarbeitung von Daten durch den Browser zu verhindern (das Standardverhalten des Drop-Ereignisses besteht darin, es als Link zu öffnen)
über dataTransfer.getData ("Text")-Methode , um die gezogenen Daten zu erhalten. 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
Vor und zurück ziehen:
Wenn Sie zwischen zwei Stellen hin und her ziehen möchten, ändern Sie einfach den obigen Code leicht.
Ändern Sie den Code im Textkörper in:
<body> <p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img id="drag1" src="img/bg_1.jpg" draggable="true" ondragstart="drag(event)" width="300px" height="180px" /></p> <p id="p2" ondrop="drop(event)" ondragover="allowDrop(event)"></p> </body>
Dann fügen Sie #p2 zum Stil hinzu:
<style type="text/css"> #p1,#p2{width:360px;height:220px;padding:20px;border:1px solid black;} </style>
Auf diese Weise können Sie per Drag & Drop hin und her ziehen.
Das Obige ist der Inhalt des HTML5-Drag-and-Drop-Effekts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!