API glisser-déposer H5 pour le tri par glisser-déposer

Cette fois, je vais vous présenter l'API glisser-déposer H5 pour le tri par glisser-déposer. Quelles sont les précautions pour l'API glisser-déposer H5 pour le tri par glisser-déposer. , jetons un coup d'oeil.

Préface

HTML5 fournit une API de glisser-déposer direct, ce qui nous facilite grandement l'obtention de l'effet glisser-déposer. écrivez beaucoup de js, juste Diverses fonctions de glisser-déposer peuvent être implémentées en écoutant les événements glisser-déposer des éléments.

Si vous souhaitez glisser et déposer un élément, vous devez définir l'attribut déplaçable de l'élément sur true. Lorsque cet 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.

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

1. dragstart : L'objet source commence à glisser et à déposer.

2. glisser : pendant le processus de glisser-déposer de l'objet source.

3. dragend : Le glisser-déposer de l'objet source se termine.

Objet de processus :

1. dragenter : L'objet source commence à entrer dans la portée de l'objet de processus.

2. dragover : L'objet source se déplace dans la portée de l'objet processus.

3. dragleave : L'objet source quitte la portée de l'objet processus.

Objet cible :

1. 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('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>

objet dataTransfer

Fournit un objet de transfert de données dataTransfer dans tous les événements de glisser-déposer, utilisé pour le transfert entre l'objet source et la cible Transmettre les données entre les objets. Voyons ensuite les méthodes et les propriétés de cet objet pour comprendre comment il transfère les données.

setData()

Cette méthode stocke les données dans l'objet dataTransfer. Reçoit deux paramètres. Le premier est une chaîne indiquant le type de données à stocker. Actuellement, les types suivants sont pris en charge :

1. text/plain : texte texte. .

2. text/html : texte HTML.

3. text/xml : texte XML.

4. text/uri-list : liste d'URL, chaque URL est une ligne.

Le deuxième paramètre est les données à stocker. Par exemple :

event.dataTransfer.setData('text/plain','Hello World');

getData()

Cette méthode lit les données de l'objet dataTransfer. Le paramètre est le type de données spécifié dans setData. Par exemple :

event.dataTransfer.getData('text/plain');

clearData()

Cette méthode efface les données stockées dans l'objet dataTransfer. Le paramètre est facultatif et correspond au type de données. Si le paramètre est vide, tous les types de données seront effacés. Par exemple :

event.dataTransfer.clearData();

setDragImage()

Cette méthode définit l'icône glisser-déposer en utilisant l'élément img. Reçoit trois paramètres, le premier est l'élément icône, le second est le déplacement sur l'axe X de l'élément icône à partir du pointeur de la souris et le troisième est le déplacement sur l'axe Y de l'élément icône à partir du pointeur de la souris. Par exemple :

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)

attributs effectAllowed et dropEffect

Ces deux attributs sont combinés pour définir l'effet visuel du glisser-déposer.

Il convient de noter : IE ne prend pas en charge les objets dataTransfer. Oui, il n'est pas pris en charge quelle que soit la version d'IE.

Implémenter le tri par glisser-déposer

Les personnes ci-dessus sont déjà familiarisées avec l'utilisation de l'API par glisser-déposer. Implémentons un simple glisser-déposer. le tri, ce qui est également courant dans les projets. Commençons par trier l'idée :

1. Dans une liste, chaque élément peut être glissé et déposé, alors définissez d'abord l'attribut draggable sur true pour chaque élément.

2. Écoutez l'événement dragstart de chaque élément et stylisez l'objet source pour le distinguer.

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）使用详解

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!