Drag & Drop ist eine gängige Funktion, bei der ein Objekt gegriffen und an einen anderen Ort gezogen wird. In HTML5 gehört das Ziehen zum Standard und jedes Element kann gezogen werden. HTML5-Drag-and-Drop ist eine sehr häufige Funktion, aber die meisten Drag-and-Drop-Fälle sind ein Schneidevorgang. Die Implementierung der HTML5-Drag-and-Drop-Kopierfunktion ist sehr einfach Nehmen Sie einfach per Drag-and-Drop ein paar kleine Änderungen vor.
ps: Dieser Blogbeitrag ist kein Homepage-Artikel, sondern nur eine einfache Notiz.
Browser-Unterstützung
Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5
V1.0-Codeteil
<!DOCTYPE html> <html> <head> <styletype="text/css"> #p1 { width: 700px; height: 120px; padding: 10px; border: 1px solid #aaaaaa; } #drag1 { cursor:pointer; } </style> <scripttype="text/javascript"> 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"); var item = document.getElementById(data).cloneNode(); ev.target.appendChild(item); } </script> </head> <body> <p>请把 Windows Azure 的图片拖放到矩形中:</p> <pid="p1" ondrop="drop(event)" ondragover="allowDrop(event)"></p> <br/> <br/> <br/> <br/> <br/> <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/> </body> </html>
Codeanalyse
Die Implementierungsidee besteht darin, das gezogene Element zu klonen und dann das geklonte Element mit appendChild() an den angegebenen Ort zu hängen
Der Kerncode zum Implementieren von HTML5-Drag-and-Drop-Kopie.cloneNode()
Nachdem das Html5-Drag-and-Drop-Kopieren abgeschlossen ist, können nach der Ausführung von appendChild() tatsächlich viele Dinge abgeschlossen werden spezifische Anforderungen
Wenn Sie nur herkömmliches HTML5-Drag & Drop implementieren möchten, entfernen Sie var item = document.getElementById(data).cloneNode(); und dann ev.target.appendChild(data); >
Geben Sie diesen Artikel weiter, ich hoffe, er hilft allen. Vielen Dank für Ihre Unterstützung dieser Website! Weitere Artikel zur Implementierung der HTML5-Drag-and-Drop-Kopierfunktion finden Sie auf der chinesischen PHP-Website!