Es dauert 5 Minuten, das Drag-and-Drop von HTML5 sowie die Reihenfolge anderer Überwachungsereignisse und deren Ausführung herauszufinden.
Definition und VerwendungDie folgenden Ereignisse werden während des Drag-and-Drop-Vorgangs ausgelöst:
Lösen Sie ein Ereignis auf dem Drag-Ziel (Quellelement) aus:
Ereignisse, die beim Freigeben des Ziels ausgelöst werden:
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.
Beispiele sind wie folgt:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Prägnantes 5-Minuten-Drag-and-Drop-Beispiel</title> <style> #draggable { width: 200px height: 20px; Textausrichtung: weiß; .dropzone {Breite: 20px; Hintergrund: 10px; var gezogen; .addEventListener(dragstart, function (event) { console.log('==========dragstart Mit dem Ziehen beginnen==========Ein Ziehen wird nur einmal ausgeführt'); // Speichern Sie die Referenz des gezogenen Elements (ref.) dragged = event.target // Machen Sie es transparent event.target . style.opacity = .5; }, false); /* Das Drag-Ereignis wird ausgelöst, wenn das Zielelement gezogen wird*/ document.addEventListener(drag, function (event) { // console.log('=========drag==========Drag wird weiterhin überwachen, bis das Element gelöscht wird'); /* Beim Platzieren des Ziels Element Trigger-Ereignisse */ document.addEventListener(dragover, function (event) { // console.log('==========dragover========== Wird beim Ziehen immer zuhören, Bis das Element gelöscht wird'); // Verhindern Sie die Standardaktion, um das Löschen zu aktivieren event.preventDefault(); }, false); document.addEventListener(dragenter, function (event) { console.log('=========dragenter zieht das Element in das Zielelement==========entspricht to dragleave '); // Den Zielknoten hervorheben, wenn das ziehbare Element in die Dropzone eintritt if (event.target.className == dropzone) { event.target.style.background = purple } }, false; document.addEventListener(dragleave, function (event) { console.log('==========dragleave zieht das Element vom Zielelement weg==========entspricht Dragenter') ; // Wenn das gezogene Element den ablegbaren Zielknoten verlässt, setzen Sie seinen Hintergrund zurück if (event.target.className == dropzone) { event.target.style.background = } }, false); (Ereignis ) { console.log('==========drop drop element==========Ein Drag wird nur einmal ausgeführt und vor dem Dragenter ausgelöst'); Öffnen von Links zu einigen Elementen) event.preventDefault(); // Verschieben Sie das gezogene Element zum ausgewählten Drop-Zone-Knoten if (event.target.className == dropzone) { event.target.style.background = ; (gezogen); event.target.appendChild(dragged); } }, false); document.addEventListener(dragend, function (event) { console.log('==========dragends drag====== =====Ein Drag wird nur einmal ausgeführt'); //Transparenz zurücksetzen event.target.style.opacity = ;</script></head><body> <div class=dropzone> < Div-ID = ziehbar draggable=true ondragstart=event.dataTransfer.setData('text/plain',null)> Dies ist ein DIV, das gezogen werden kann </div> </div> <div class=dropzone></div> <div class= Dropzone ></div> <div class=dropzone></div></body></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.