Tutoriel avancé HTML5 - API glisser-déposer pour implémenter le tri par glisser-déposer-Tutoriel H5-php.cn

Tutoriel avancé HTML5 - API glisser-déposer pour implémenter le tri par glisser-déposer

零下一度

Libérer： 2017-05-12 12:02:36

original

1693 Les gens l'ont consulté

Avant-propos

HTML5 fournit une API par glisser-déposer direct, qui est super Il est pratique pour nous de réaliser l'effet glisser-déposer. Nous n'avons pas besoin d'écrire beaucoup de js. Nous pouvons réaliser diverses fonctions glisser-déposer en écoutant simplement l'événement glisser-déposer du. élément.

Si vous souhaitez glisser et déposer un élément, vous devez définir l'attribut draggable de l'élément sur true. Lorsque l'attribut est faux, le glisser-déposer ne sera pas autorisé. L'élément img et l'élément a ont tous deux l'attribut draggable défini sur true par défaut, ils peuvent donc être glissés et déposés directement. Si vous ne souhaitez pas glisser-déposer ces deux éléments, définissez simplement l'attribut sur false.

Événements glisser-déposer

Les événements glisser-déposer sont générés par différents éléments. Lorsqu'un élément est glissé et déposé, il peut traverser de nombreux éléments avant d'atteindre finalement l'élément que vous souhaitez placer. Ici, j'appelle temporairement l'élément glissé l'objet source, l'élément passé l'objet de processus et l'élément arrivé l'objet cible. Différents objets génèrent différents événements de glisser-déposer.

Objet source :

dragstart : L'objet source commence à glisser-déposer.
glisser : pendant le processus de glisser-déposer de l'objet source.
dragend : Le glisser-déposer de l'objet source se termine.

dragenter : L'objet source commence à entrer dans la portée de l'objet processus.
dragover : L'objet source se déplace dans la portée de l'objet processus.
dragleave : L'objet source quitte la portée de l'objet processus.

drop : L'objet source est glissé et déposé dans l'objet cible.

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

Copier après la connexion

text/plain : texte texte.
text/html : texte HTML.
text/
xml : texte XML.
text/uri-list : liste d'URL, chaque URL est une ligne.

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

Copier après la connexion

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

Copier après la connexion

clearData()

event.dataTransfer.clearData();

Copier après la connexion

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)

Copier après la connexion

Dans une liste, chaque élément peut être glissé et déposé. Ensuite, vous devez d'abord définir l'attribut draggable sur true pour chaque élément.
Écoutez l'événement dragstart de chaque élément et stylisez l'objet source pour le distinguer.
Écoutez l'événement dragenter de chaque élément. Lorsque l'objet source entre dans l'élément actuel, ajoutez l'objet source avant l'élément. De cette façon, les éléments suivants seront éliminés par l'objet source, obtenant ainsi un effet de tri.
Mais vous constaterez que l'objet source ne peut pas être classé en dernier, mais ne peut être classé qu'en avant-dernier. À ce stade, vous devez écouter l'événement dragleave. Lorsque l'objet de processus est le dernier élément, l'objet source quitte l'objet de processus, puis l'objet source est ajouté à la fin.

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

Copier après la connexion

hauteur dans IE, l'événement dragleave ne sera pas déclenché.

Adresse du plug-in : ios-html5-drag-drop-shim

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

Copier après la connexion

【Recommandations associées】

Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

3 Tutoriel vidéo HTML5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!