recherche

Maison  >  Article  >  interface Web  >  Bases de l'API glisser-déposer H5

Bases de l'API glisser-déposer H5

大家讲道理
大家讲道理original
2017-05-28 11:07:392100parcourir

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

　


    地上有石子，捡几个吧
    
    
        
        
        
    
    
    我是篮子    
    
    我是地
    
        石子
        石子
        石子
        石子
        石子
        石子
        石子
        石子
        石子
        石子


　(g

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>


　

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  :

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>


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


　　关于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);


 

 四、关于拖放数据传递

　　上面的例子已经谈到了拖放的数据传递方法，这里在总结一下。

　　1、通过dataTransfer的setData()和getData()方法传递

　　2、通过闭包的方法，请参考开篇的例子。

五、总结

　　HTML5的拖放api非常简洁实用，为我们省去了很多麻烦，如果没有它，我们可能需要通过mousedownmousemove等等事件才能实现上述功能。本文较为详细的介绍了相关api，希望对你有所帮助。关于拖放api的应用大家可以参看下面链接的文章，他做了一个拖放排序，这是一个比较常见的应用场景。

　　大～熊同学的粉丝数正在逼近三位数，感谢各位园友的支持，大～熊会继续努力的！　

　　参考：

  • http://www.cnblogs.com/ijjyo/p/4316232.html 

  • http://www.cnblogs.com/linxin/p/6794542.html

 

　

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：stockage Web HTML5Article suivant：stockage Web HTML5

Articles Liés

Voir plus