Heim > Artikel > Web-Frontend > HTML5-Tutorial für Fortgeschrittene – Drag-and-Drop-API zum Implementieren der Drag-and-Drop-Sortierung
Vorwort
HTML5 bietet eine direkte Drag-and-Drop-API großartig Es ist für uns praktisch, den Drag-and-Drop-Effekt zu realisieren. Wir müssen nicht viele JS schreiben. Wir können verschiedene Drag-and-Drop-Funktionen realisieren, indem wir einfach auf das Drag-and-Drop-Ereignis hören Element.
Wenn Sie ein Element per Drag & Drop verschieben möchten, müssen Sie das Draggable-Attribut des Elements auf „true“ setzen. Wenn das Attribut „false“ ist, ist Drag & Drop nicht zulässig. Sowohl für das img-Element als auch für das a-Element ist das Draggable-Attribut standardmäßig auf true gesetzt, sodass sie direkt per Drag & Drop verschoben werden können. Wenn Sie diese beiden Elemente nicht per Drag & Drop verschieben möchten, setzen Sie das Attribut einfach auf false. Drag-and-Drop-EreignisseDrag-and-Drop-Ereignisse werden von verschiedenen Elementen generiert. Wenn ein Element per Drag-and-Drop verschoben wird, durchläuft es möglicherweise viele Elemente und erreicht schließlich das Element, das Sie platzieren möchten. Hier nenne ich das gezogene Element vorübergehend das Quellobjekt, das übergebene Element das Prozessobjekt und das angekommene Element das Zielobjekt. Verschiedene Objekte erzeugen unterschiedliche Drag-and-Drop-Ereignisse. Quellobjekt:<p id="source" draggable="true">a元素</p> <p id="process">b元素</p> <p id="target">c元素</p> <script> var source = document.getElementById('source'), // a元素 process = document.getElementById('process'), // b元素 target = document.getElementById('target'); // c元素 source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素产生 console.log('a元素开始被拖动'); },false) process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素产生 console.log('a元素开始进入b元素'); },false) process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素产生 console.log('a元素离开b元素'); },false) target.addEventListener('drop',function(ev){ // drop事件由c元素产生 console.log('a元素拖放到c元素了'); ev.preventDefault(); },false) document.ondragover = function(e){e.preventDefault();} </script>dataTransfer-Objekt stellt in allen Drag-and-Drop-Ereignissen ein Datenübertragungsobjekt dataTransfer bereit, das zum Übertragen von Daten zwischen dem Quellobjekt und dem Zielobjekt verwendet wird. Als Nächstes lernen wir die Methoden und Eigenschaften dieses Objekts kennen, um zu verstehen, wie es Daten überträgt. setData()Diese Methode speichert Daten im dataTransfer-Objekt. Empfängt zwei Parameter. Der erste ist eine Zeichenfolge, die den Typ der zu speichernden Daten angibt:
xml: XML-Text.
event.dataTransfer.setData('text/plain','Hello World');getData()Diese Methode liest Daten aus dem dataTransfer-Objekt. Der Parameter ist der in setData angegebene Datentyp. Zum Beispiel:
event.dataTransfer.getData('text/plain');
event.dataTransfer.clearData();setDragImage()Diese Methode legt das Drag-and-Drop-Symbol mithilfe des img-Elements fest. Empfängt drei Parameter, der erste ist das Symbolelement, der zweite ist die X-Achsenverschiebung des Symbolelements vom Mauszeiger und der dritte ist die Y-Achsenverschiebung des Symbolelements vom Mauszeiger. Zum Beispiel:
var source = document.getElementById('source'), icon = document.createElement('img'); icon.src = 'img.png'; source.addEventListener('dragstart',function(ev){ ev.dataTransfer.setDragImage(icon,-10,-10) },false)effectAllowed- und dropEffect-Attribute Diese beiden Attribute werden kombiniert, um den visuellen Effekt von Drag & Drop festzulegen. Es ist erwähnenswert: IE unterstützt keine dataTransfer-Objekte. Ja, es wird unabhängig von der IE-Version nicht unterstützt. Drag-and-Drop-Sortierung implementierenWir sind bereits mit der Verwendung der Drag-and-Drop-API vertraut. Lassen Sie uns eine einfache Drag-and-Drop-Sortierung implementieren, die auch in der Praxis üblich ist Projekte. Lassen Sie uns zunächst die Idee klären:
var source = document.querySelectorAll('.list'), dragElement = null; for(var i = 0; i < source.length; i++){ source[i].addEventListener('dragstart',function(ev){ dragElement = this; },false); source[i].addEventListener('dragenter', function(ev){ if(dragElement != this){ this.parentNode.insertBefore(dragElement,this); } }, false) source[i].addEventListener('dragleave', function(ev){ if(dragElement != this){ if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){ this.parentNode.appendChild(dragElement); } } }, false) }; document.ondragover = function(e){e.preventDefault();} document.ondrop = function(e){e.preventDefault();}Vollständige Codeadresse: Drag-DemoKompatibelHauptsächlich kompatibel mit IE Nicht Großartig, aber zumindest ist es mit der Drag-Sortierung oben in IE10 kompatibel. Und in meinem einfachen Experiment habe ich herausgefunden, dass das Dragleave-Ereignis nicht ausgelöst wird, wenn das Element im IE nicht auf
Höhe eingestellt ist.
Der wichtigere Punkt ist, dass sie auf iOS und Android völlig inkompatibel sind. Glücklicherweise gibt es ein Plug-in, das die perfekte Kompatibilität mit mobilen Geräten ermöglicht.Plug-in-Adresse: ios-html5-drag-drop-shim
<script> var iosDragDropShim = { enableEnterLeave: true } </script> <script src="vendor/ios-drag-drop.js"></script>[Verwandte Empfehlungen]1.
Kostenloses h5-Online-Video-Tutorial
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonHTML5-Tutorial für Fortgeschrittene – Drag-and-Drop-API zum Implementieren der Drag-and-Drop-Sortierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!