HTML5-Tutorial für Fortgeschrittene – Drag-and-Drop-API zum Implementieren der Drag-and-Drop-Sortierung-H5-Tutorial-php.cn

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-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 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:

Dragstart: Das Quellobjekt beginnt mit dem Ziehen und Ablegen.
Ziehen: Während des Drag-and-Drop-Vorgangs des Quellobjekts.
dragend: Das Drag & Drop des Quellobjekts endet.

dragenter: Das Quellobjekt beginnt, in den Bereich des Prozessobjekts einzutreten.
Dragover: Das Quellobjekt bewegt sich innerhalb des Geltungsbereichs des Prozessobjekts.
dragleave: Das Quellobjekt verlässt den Gültigkeitsbereich des Prozessobjekts.

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(&#39;source&#39;),     // a元素
        process = document.getElementById(&#39;process&#39;),   // b元素
        target = document.getElementById(&#39;target&#39;);     // c元素
    
    source.addEventListener(&#39;dragstart&#39;,function(ev){   // dragstart事件由a元素产生
        console.log(&#39;a元素开始被拖动&#39;);
    },false)

    process.addEventListener(&#39;dragenter&#39;,function(ev){  // dragenter事件由b元素产生
        console.log(&#39;a元素开始进入b元素&#39;);
    },false)
    process.addEventListener(&#39;dragleave&#39;,function(ev){  // dragleave事件由b元素产生
        console.log(&#39;a元素离开b元素&#39;);
    },false)

    target.addEventListener(&#39;drop&#39;,function(ev){        // drop事件由c元素产生
        console.log(&#39;a元素拖放到c元素了&#39;);
        ev.preventDefault();
    },false)
    document.ondragover = function(e){e.preventDefault();}
</script>

Nach dem Login kopieren

text/plain: Text.
text/html: HTML-Text.
text/
xml: XML-Text.
text/uri-list: URL-Liste, jede URL ist eine Zeile.

event.dataTransfer.setData(&#39;text/plain&#39;,&#39;Hello World&#39;);

Nach dem Login kopieren

event.dataTransfer.getData(&#39;text/plain&#39;);

Nach dem Login kopieren

clearData()

event.dataTransfer.clearData();

Nach dem Login kopieren

var source = document.getElementById(&#39;source&#39;),
    icon = document.createElement(&#39;img&#39;);

icon.src = &#39;img.png&#39;;

source.addEventListener(&#39;dragstart&#39;,function(ev){
    ev.dataTransfer.setDragImage(icon,-10,-10)
},false)

Nach dem Login kopieren

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.
Hören Sie sich das Dragstart-Ereignis jedes Elements an und formatieren Sie das Quellobjekt, um es zu unterscheiden.
Hören Sie sich das Dragenter-Ereignis jedes Elements an. Wenn das Quellobjekt in das aktuelle Element eintritt, fügen Sie das Quellobjekt vor dem Element hinzu. Auf diese Weise werden die nachfolgenden Elemente vom Quellobjekt verdrängt, wodurch ein Sortiereffekt erzielt wird.
Aber Sie werden feststellen, dass das Quellobjekt nicht an letzter Stelle, sondern nur an vorletzter Stelle stehen kann. Zu diesem Zeitpunkt müssen Sie das Dragleave-Ereignis abhören. Wenn das Prozessobjekt das letzte Element ist, verlässt das Quellobjekt das Prozessobjekt und fügt dann das Quellobjekt am Ende hinzu.

var source = document.querySelectorAll(&#39;.list&#39;),
    dragElement = null;

for(var i = 0; i < source.length; i++){
    source[i].addEventListener(&#39;dragstart&#39;,function(ev){
        dragElement = this;
    },false);

    source[i].addEventListener(&#39;dragenter&#39;, function(ev){
        if(dragElement != this){
            this.parentNode.insertBefore(dragElement,this);
        }
    }, false)

    source[i].addEventListener(&#39;dragleave&#39;, 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();}

Nach dem Login kopieren

Höhe eingestellt ist.

Plug-in-Adresse: ios-html5-drag-drop-shim

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

Nach dem Login kopieren

[Verwandte Empfehlungen]

Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

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!