H5-Drag-and-Drop-API für Drag-and-Drop-Sortierung

Dieses Mal stelle ich Ihnen die H5-Drag-and-Drop-API für die Drag-and-Drop-Sortierung vor. Was sind die Vorsichtsmaßnahmen für die H5-Drag-and-Drop-API für die Drag-and-Drop-Sortierung? , lass uns einen Blick darauf werfen.

Vorwort

HTML5 bietet eine direkte Drag-and-Drop-API, die uns das Erreichen des Drag-and-Drop-Effekts erheblich erleichtert Schreiben Sie viele JS, nur durch Abhören der Drag-and-Drop-Ereignisse von Elementen können verschiedene Drag-and-Drop-Funktionen implementiert werden.

Wenn Sie ein Element per Drag & Drop verschieben möchten, müssen Sie das ziehbare -Attribut des Elements auf „true“ setzen. Wenn dieses 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-Ereignisse

Drag-and-Drop-Ereignisse werden von verschiedenen Elementen generiert. Wenn ein Element per Drag-and-Drop verschoben wird, durchläuft es möglicherweise viele Elemente, bevor es schließlich das Element erreicht, 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. Unterschiedliche Objekte erzeugen unterschiedliche Drag-and-Drop-Ereignisse.

Quellobjekt:

1. Dragstart: Das Quellobjekt beginnt mit dem Ziehen und Ablegen.

2. Ziehen: Während des Drag-and-Drop-Vorgangs des Quellobjekts.

3. dragend: Das Drag & Drop des Quellobjekts endet.

Prozessobjekt:

1. dragenter: Das Quellobjekt beginnt, in den Bereich des Prozessobjekts einzutreten.

2. Dragover: Das Quellobjekt bewegt sich innerhalb des Geltungsbereichs des Prozessobjekts.

3. dragleave: Das Quellobjekt verlässt den Gültigkeitsbereich des Prozessobjekts.

Zielobjekt:

1. Drop: Das Quellobjekt wird per Drag & Drop in das Zielobjekt gezogen.

<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 ein Datenübertragungsobjekt dataTransfer in allen Drag-and-Drop-Ereignissen bereit, das für die Übertragung zwischen dem Quellobjekt und verwendet wird das Ziel Daten zwischen Objekten weitergeben. 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:

1. text/plain: Text .

2. text/html: HTML-Text.

3. text/xml: XML-Text.

4. text/uri-list: URL-Liste, jede URL ist eine Zeile.

Der zweite Parameter sind die zu speichernden Daten. Zum Beispiel:

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');

clearData()

Diese Methode löscht die im dataTransfer-Objekt gespeicherten Daten. Der Parameter ist optional und entspricht dem Datentyp. Wenn der Parameter leer ist, werden alle Datentypen gelöscht. Zum Beispiel:

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 implementieren

Die oben genannten Personen sind bereits mit der Verwendung der Drag-and-Drop-API vertraut. Lassen Sie uns ein einfaches Drag-and-Drop implementieren Sortieren, was auch in Projekten üblich ist. Lassen Sie uns zunächst die Idee klären:

1. In einer Liste kann jedes Element per Drag-and-Drop verschoben werden. Dann müssen Sie zunächst das Draggable-Attribut für jedes Element auf true setzen.

2. Hören Sie sich das Dragstart-Ereignis jedes Elements an und formatieren Sie das Quellobjekt, um es zu unterscheiden.

3. 监听每个元素的 dragenter 事件，当源对象进入到当前元素里，就把源对象添加到该元素之前。这样子后面的元素就会被源对象挤下去了，实现了排序的效果。

4. 但是会发现，源对象无法排到最后一个去，只能在倒数第二。这时就要监听 dragleave 事件，当过程对象是最后一个元素时，源对象离开了过程对象，这时就把源对象添加到最后去。

主要代码如下：

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();}

完整的代码地址：drag-demo 

兼容

主要是在IE中的兼容不太好，不过至少在IE10中能兼容上面的拖动排序。

而且在我简单的试验中发现，就是在 IE 中元素不设置 height 的时候，不会触发 dragleave 事件。

更重要的一点是在 ios 和安卓上，完全不兼容。不过还好，有一个插件能让它在移动端完美兼容。  

插件地址：ios-html5-drag-drop-shim    

只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。

<script>
var iosDragDropShim = { enableEnterLeave: true }
</script>
<script src="vendor/ios-drag-drop.js"></script>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端页面跳转并取值的实现

H5的多线程（Worker SharedWorker）使用详解

Das obige ist der detaillierte Inhalt vonH5-Drag-and-Drop-API für Drag-and-Drop-Sortierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!