Bases de l'API glisser-déposer H5-Tutoriel H5-php.cn

Ne vous y trompez pas, cet article ne traite pas de la façon de nettoyer le sol. Les amis qui ont lu "javascriptEssence" devraient savoir que le processus de mise en œuvre du glisser-déposer est relativement compliqué. Les temps ont changé maintenant. Nous pouvons utiliser la nouvelle API de glisser-déposer pour <.> Il est très pratique d'obtenir l'effet glisser-déposer. Récemment, j'ai rencontré un collègue jardinier dans le jardin qui a écrit un article "HTML5 Advanced Series : API glisser-déposer pour réaliser le tri par glisser-déposer". C'est vraiment le travail d'un maître. En tant que débutant (pas maître), M. Xiong, je ne peux pas comparer avec cela, j'ai donc lancé le chapitre de base, j'espère que tous les amis du jardinage en tireront quelque chose.

1. Un exemple simple - ramasser quelques pierres au sol

Copier après la connexion

ifLa démonstration utilise Edge. C'est trop compliqué de faire des gif sur mon Ubuntu, alors j'ai emprunté un Windows)

Utilisé ici Un exemple simple montre comment implémenter le glisser-déposer. Ensuite, la question se pose à partir de la démonstration ci-dessus, vous pouvez deviner l'utilisation de certains

attributs et méthodes . Que signifient ces attributs ? Venez un par un ci-dessous.

2. Étapes générales pour mettre en œuvre le glisser-déposer

1. Trouver un élément déplaçable

Tout comme tout le monde ne s'appelle pas Big Bear, et pas tous les éléments peuvent être glissés. Les éléments img et a peuvent être déplacés par défaut, et les autres éléments ne peuvent pas être déplacés par défaut. À ce moment-là, vous pouvez ajouter draggable=true pour le rendre déplaçable.

<p draggable=&#39;true&#39;></p>

Copier après la connexion

2. Gérer les événements liés au glisser-déposer

Tous les événements liés sont les suivants : (Ceci est tiré de : http://www.cnblogs.com/linxin/p/6794542.html)

Source

Objet :

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

Objet de processus :

dragenter : L'objet source commence à entrer dans la portée de l'objet de 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.

Objet cible :

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

Nous pouvons utiliser un test pour voir quand ces événements sont déclenchés et quels sont les objets événementiels.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>testEvents</title>
    <style type="text/css">
        .source{
            width: 50px;
            height: 50px;
            border: 1px solid red;
        }
        .process{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin-top: 10px;
        }
        .dest{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            margin-top: 10px;
        }
    </style></head><body>
    <p class="source" id="source" draggable="true"></p>
    <p class="process" id="process"></p>
    <p class="dest" id="dest"></p>
    <script type="text/javascript">
    window.onload=function(){        var source = document.getElementById("source");        var process = document.getElementById("process");        var dest = document.getElementById("dest");        var sourceEle;

        source.addEventListener("dragstart",function(e){
            console.log("source dragstart");
            console.log(e);
            sourceEle = e.target;            var dt = e.dataTransfer;
            dt.effectedAllowed = "all";
        },false);

        process.addEventListener("dragenter",function(e){
            console.log("process dragenter");
            console.log(e);
        },false);

        process.addEventListener("dragover",function(e){
            console.log("process dragover");
            console.log(e);
        },false);

        process.addEventListener("dragleave",function(e){
            console.log("process dragleave");
            console.log(e);
        },false);

        source.addEventListener("drag",function(e){
            console.log("source drag");
            console.log(e);
        },false);

        dest.addEventListener("dragend",function(e){
            console.log("dest dragend");
            console.log(e);
            e.preventDefault();
        },false);

        dest.addEventListener("drop",function(e){
            console.log("dest drop");
            console.log(e);
            dest.appendChild(sourceEle);
            e.preventDefault();
            e.stopPropagation();
        },false);

        document.ondragover = function(e){e.preventDefault();}
        document.ondrop = function(e){e.preventDefault();}
    }    </script></body></html>

Copier après la connexion

Cet exemple répertorie les événements impliqués dans le processus de glisser-déposer. Pour approfondir davantage, vous pouvez consulter la console pour voir l'ordre dans lequel les événements sont déclenchés et les objets d'événement.

3. Un objet important, l'objet DataTransfer

La première lettre ici est en majuscule À proprement parler, elle s'appelle une classe. Cette classe sera instanciée à chaque fois que vous glisserez et déposerez. il sera stocké dans l'attribut dataTransfer de l'objet événement. Ses propriétés et méthodes sont présentées dans le tableau ci-dessous (extrait de : http://www.cnblogs.com/ijjyo/p/4316232.html)

Merci pour votre résumé, je vous ai apporté tellement de choses. . Merci ah.

et dropEffect

, ici le premier est défini sur effectAllowed et le second est sélectionné à l'aide de la liste déroulante

pour faciliter la visualisation des différents styles de souris.

J'ai testé la méthode sur Ubuntu chromeome et j'ai trouvé que ils sont tous d'une seule main, mais il ne peut pas être glissé lorsqu'il est défini sur aucun. Il peut y avoir des différences selon les systèmes.

À propos des méthodes setData() et getData()

　Ces deux méthodes sont liées à l'échange de données. La première transmet deux paramètres et le premier paramètre est un mime. tapez

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>testEvents</title>
    <style type="text/css">
        .source{
            width: 50px;
            height: 50px;
            border: 1px solid red;
        }
        .process{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin-top: 10px;
        }
        .dest{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            margin-top: 10px;
        }
    </style></head><body>
    <select id="dpe">
        <option value="copy">copy</option>
        <option value="move">move</option>
        <option value="link">link</option>
        <option value="none">none</option>
    </select>
    <p class="source" id="source" draggable="true"></p>
    <p class="process" id="process"></p>
    <p class="dest" id="dest"></p>
    <script type="text/javascript">
    window.onload=function(){        var source = document.getElementById("source");        var process = document.getElementById("process");        var dest = document.getElementById("dest");        var dpe = document.getElementById("dpe");        var dpev;

        dpe.onchange = function(){
            dpev = this.value;
        }        var sourceEle;

        source.addEventListener("dragstart",function(e){
            console.log("source dragstart");
            console.log(e);
            sourceEle = e.target;            var dt = e.dataTransfer;
            dt.effectedAllowed = "all";
        },false);

        dest.addEventListener("dragend",function(e){
            console.log("dest dragend");
            console.log(e);
            e.preventDefault();
        },false);

        dest.addEventListener("drop",function(e){
            console.log("dest drop");
            console.log(e);
            dest.appendChild(sourceEle);
            e.preventDefault();
            e.stopPropagation();
        },false);

        document.ondragover = function(e){
            e.dataTransfer.dropEffect = dpev;
            e.preventDefault();
        }
        document.ondrop = function(e){e.preventDefault();}
    }    </script></body></html>

Copier après la connexion

String

, le second est data ; ce dernier passe un paramètre, qui est de type MIME. Les types MIME disponibles sont text/plain, text/html, text/
xml

, text/uri-list.

Cas de test, faites glisser l'élément de menu sur le bloc-notes.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>点菜</title>
    <style type="text/css">
        .menu{
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin-right: 10px;
            float: left;
        }
        .record{
            width: 200px;
            height: 300px;
            border: 1px solid black;
            margin-right: 10px;
            float: left;
        }
    </style></head><body>
    <ul class="menu" id="menu">
        <li draggable="true">糖醋排骨</li>
        <li draggable="true">青椒肉丝</li>
        <li draggable="true">武昌鱼</li>
        <li draggable="true">手撕包材</li>
        <li draggable="true">千叶豆腐</li>    
    </ul>
    <ul class="record" id="record">
        
    </ul>
    <script type="text/javascript">
        window.onload = function(){            var menu = document.getElementById("menu");            var record = document.getElementById("record");

            menu.addEventListener("dragstart",function(e){                var dt = e.dataTransfer;                var tar = e.target;                if(tar.tagName=="LI"){
                    dt.setData("text/plain",tar.innerHTML);
                }
                dt.effectedAllowed = "all";
            },false);

            record.addEventListener("drop",function(e){                var li  = document.createElement("li");
                li.appendChild(document.createTextNode(e.dataTransfer.getData("text/plain")));
                record.appendChild(li);
                e.stopPropagation();
            },false);

            record.addEventListener("dropend",function(e){
                e.preventDefault();
            },false);

            document.addEventListener("dragover",function(e){e.preventDefault()},false);

            document.addEventListener("drop",function(e){e.preventDefault()},false);
        }    </script></body></html>

Copier après la connexion

　　关于setDragImage(Element img,long x,long y)

　　这个方法是设置拖放时的图标的，第一个参数表是图标元素，第二个表示相对与光标的水平偏移，第三个是垂直的。

　　还是前面的例子，在dragstart事件添加下面的代码，拖动时你会发现一只很大的手（不要被吓到）;

var img = document.createElement("img");
                img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493802056263&di=232de2c30491e19f32833669ad5a67ae&imgtype=0&src=http%3A%2F%2Fstatic.freepik.com%2Ffree-photo%2Fone-finger_318-10333.jpg";
                dt.setDragImage(img,10,10);

Copier après la connexion