Comment créer un effet de traînée dans H5-Tutoriel H5-php.cn

Comment créer un effet de traînée dans H5

php中世界最好的语言

Libérer： 2018-01-09 10:38:03

original

4661 Les gens l'ont consulté

Cette fois, je vais vous montrer comment créer un effet de traînée en H5. Quelles sont les précautions pour créer un effet de traînée en H5. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Attributs liés au glisser

L'attribut déplaçable est l'attribut global de HTML5. C'est l'une des façons dont HTML5 prend en charge les opérations de glisser-déposer. l'élément peut être glissé et déposé. , draggable a trois valeurs, true signifie qu'il peut être glissé et déposé, false signifie qu'il ne peut pas être glissé et déposé, auto signifie utiliser la valeur par défaut du navigateur

<ul>     
    <li id="item1" draggable="true">列表1</li>  
    <li id="item2" draggable="true">列表2</li>  
    <li id="item3" draggable="true">列表3</li>  
    <li id="item4" draggable="true">列表4</li>  
    <li id="item5" draggable="true">列表5</li>  
    <li id="item6" draggable="true">列表6</li>  
</ul>

Copier après la connexion

Lié au glisser events

ondragstart : cet événement est déclenché lorsque l'utilisateur commence à faire glisser un élément ou à sélectionner du texte ondrag : déclenché lorsque l'élément est déplacé ondragend : déclenché lorsque l'utilisateur termine le glisser-déposer d'un élément ondragleave : déclenché lorsque l'objet être déplacé par la souris quitte la portée de son conteneur ondragover : quand un Cet événement est déclenché lorsque l'objet glissé est glissé dans la portée d'un autre objet conteneur Cet événement se produit sur l'élément cible ondrop : Lors d'un processus de glissement, cet événement est. déclenché lorsque la souris est relâchée. Cet événement agit sur l'élément cible

Méthodes liées à l'objet DataTransfer

setData(format,data) : Ajouter un format de données personnalisé getData(format) : Obtenir un format de données personnalisé. format de données clearData([format]) : effacez le format de données personnalisé et Data

Event.preventDefault()

Cette méthode est le comportement par défaut pour empêcher les événements de PreventDefault() d'être exécutés. ondragover, sinon l'événement ondrop ne sera pas déclenché

<!DOCTYPE html>     
<html>     
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            .main{   
                width: 800px;   
                /*border: 1px solid #ccc;*/   
                height: 400px;   
                margin:0 auto;   
            }   
            .left{   
                float: left;   
                width: 25%;   
                background-color: #666;   
                height: 370px;   
                text-align: center;   
                color: black;   
                padding-top:30px ;   
                font-size: 110px;   
            }   
            .right{   
                float: right;   
                width: 69%;   
            }   
            .right ul,.right li{   
               margin: 0;   
               padding: 0;   
            }   
            .right li{   
                list-style: none;   
                border: 2px dashed  #666;   
                background-color: #ddd;   
                height: 60px;   
                margin-top: 3px;   
                text-indent: 30px;   
                line-height: 60px;   
            }   
            .right li:hover{   
                background-color: #ccc;   
            }   
            #message{   
  
                width: 800px;   
                text-align: center;   
                border: 1px solid black;   
                margin: 20px auto;   
                font-size:28px;   
            }   
        </style>  
        <script type="text/javascript">  
            window.onload = function(){   
                var aLi = document.getElementsByTagName(&#39;li&#39;);   
                var oLeft = document.getElementsByClassName(&#39;left&#39;)[0];   
                var oMessage = document.getElementById(&#39;message&#39;);   
  
                for(var i=0;i<aLi.length;i++){   
                    aLi[i].index = i+1;   
                    aLi[i].ondragstart = function(ev){   
                                                //事件对象ev   
                        var evev = ev || event;   
  
                        ev.dataTransfer.setData("Text",this.id);   
                    }   
  
                }   
                oLeft.ondrop = function(ev){   
  
                    var evev = ev || event;   
                    var data = ev.dataTransfer.getData("Text");   
                    var num = document.getElementById(data).index;   
                     document.getElementById(data).remove();   
  
                    oMessage.innerHTML = "列表"+num+"被放进了垃圾箱";   
  
                    this.style.color = "black";   
  
                    }   
                oLeft.ondragover = function(ev){   
                    var evev = ev || event;   
                    ev.preventDefault();   
                }   
                oLeft.ondragenter = function(){   
                    this.style.color = "#fff";   
                }   
            }   
        </script>  
    </head>  
    <body>  
        <div class="main">  
            <div class="left">垃圾箱</div>  
            <div class="right">  
                <ul>  
                    <li id="item1" draggable="true">列表1</li>  
                    <li id="item2" draggable="true">列表2</li>  
                    <li id="item3" draggable="true">列表3</li>  
                    <li id="item4" draggable="true">列表4</li>  
                    <li id="item5" draggable="true">列表5</li>  
                    <li id="item6" draggable="true">列表6</li>  
                </ul>  
            </div>  
            <div style="clear: both;"></div>  
  
  
        </div>  
        <div id="message">拖到垃圾箱删除列表</div>  
    </body>  
</html>

Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment compter le nombre de sommes de table dans bootstrap

Comment utiliser JS pour basculer entre masquer et afficher icônes en même temps

Comment implémenter vue.js todolist

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!