h5 拖拽效果制作教程：实战案例与注意事项解析

首先，说说啥叫拖拽特效。说白了，拖拽就是能用鼠标把页面里的东西给挪动位置。是不是超炫？咱们在HTML5里面，就靠设置draggable属性来搞定这种效果。这个属性有3种选择，true就是说能拖动false则不可以，auto就让浏览器自己判断好了。这样就能随心所欲控制哪些玩意儿可以拖，哪些不能动哟~

你要知道，拖拽不只是挪动东西这么简单，这个过程中还有许多其他环节！比如有ondragstart、ondrag、ondragend这三个事件，它们分别在拖动过程中的每一步都起作用，帮咱们好好操控拖动。拖酷起来就更加有趣灵活！

拖拽相关的事件详解

说到拖拽，你得知道几个重要的东西。第一个就是ondragstart，当你开始拖东西时它会发生，这时候用它来做一些初始化设置或者获取些信息最合适了。接着，ondrag就像个跟屁虫一样，在你拖动的时候都会存在，这时候你可以通过它来实时查看元素的位置或是改变其他属性。最后还有ondragend，这家伙在你拖完了就出现，让你有时间去搞一搞一些收尾的事情，或者更新下网页什么的。

除了本文提到的，你还得了解ondragleave和ondragover。ondragleave就是当你把东西从原来的地方拉出来就会触发；而ondragover就是当你拿着东西要放到别的地方去，没碰到新家之前也会触发！这俩能帮你把握好东西拖动时候的分寸和动作。当然，还有那个至关重要的ondrop，你松开鼠标的瞬间就能触发它，拖拽效果不就靠这个来搞定！

dataTransfer对象的使用

     
    
列表1
  
    
列表2
  
    
列表3
  
    
列表4
  
    
列表5
  
    
列表6
  

拖拽炫酷操作中，dataTransfer这家伙可厉害了！你看，它有三个好用的功能——设定data、取得data和清除data。搞啥？没错，咱就是要用它们处理和传递数据。比如说，拖拽开始前，先用setData给数据装扮一下；成功拖拽完毕后，再通过getData一把抓回来。这么一玩，连复杂的数据也能在这个过程里随意跳舞！

对，dataTransfer对象有个叫clearData的好方法，能把我们之前设的数据给清掉，最适合拿来做清理了。例如，拖拽完了就用clearData，保证一干二净不用担心会乱七八糟的垃圾数据留下来。

Event.preventDefault()的重要性

你们知道吗？要弄好拖拽效果，Event.preventDefault()这招很管用。它能拦住事件的常规操作，保证咱的拖动没问题。特别是当发生ondragover时，要记得加个preventDefault()，不然ondrop就出不来拖拽也就玩不转！

你想如果没了preventDefault()方法，咱们的滑动效果就容易出状况了！你知道，在鼠标拖动时，元素老放错位置。还有，可能会被其他触发器给搞糊里糊涂的。所以这个method可太重要，让我们的滑动效果变得稳当可靠！

实战案例：如何实现一个简单的拖拽效果

下面，咱们就用一个例子来看怎么搞定这个简单的拖拽特效！先搭建一个含有要拖动元素和目标位置的HTML架构，接着给它们加上对应的拖拽事件处理代码。

比如说，给拖动的元素加上个ondragstart事件，用来设定一下开始时的状态；接下来，给目的地也加个ondragover和ondrop，用于处理拖放的过程；最后，别忘了再给拖动元素上加个ondragend事件，完成后打扫收拾干净。

搞清楚这些，拖拽效果就轻松搞定！其实，真正敲代码时还有好多麻烦事儿要处理，奇奇怪怪的小细节得想周全才行。不过没事儿，咱有了这基本的方程式和公式，就能随心所欲地做各种有意思的拖曳效果啦～

拖拽效果的注意事项

实现拖曳功能时有几个要点得记住。首先，得让拖动的对象和目标位置显眼点儿，大家才能明白啥能拖，啥放哪儿。再者，拖曳的范围也不能太大或太小，别让元素跑出界或是乱溜达了。

还有，别忘了关心下拖拽效果的速度。因为做这个效果可是要跟好多DOM操作和事件处理打交道的，搞不好就可能让网页卡成狗或者变得慢吞吞的。所以，我们得想办法把拖拽这事儿做得更聪明点，尽量少搞无用功。

来说说拖拽的适应性。各个浏览器、设备对于拖拽的接受度不一样，得搞清楚哪种方式能用，哪种不能用，别到时候拖拉不动就行了。

拖拽效果的优化技巧

要提高拖曳的用户感受，用些小技巧就能搞定了。比如说，用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;   
            }   
          
          
            window.onload = function(){   
                var aLi = document.getElementsByTagName('li');   
                var oLeft = document.getElementsByClassName('left')[0];   
                var oMessage = document.getElementById('message');   
  
                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";   
                }   
            }   
          
      
      
        
  
            
垃圾箱
  
            
  
                
  
                    
列表1
  
                    
列表2
  
                    
列表3
  
                    
列表4
  
                    
列表5
  
                    
列表6
  
                
  
            
  
            
  
  
  
        
  
        
拖到垃圾箱删除列表
  
      

随着互联网的进步，网页上的拖拽功能也越来越牛了！不久以后，可能还能见到更智能、好用的拖拽，就像用AI来预测我们要拖到哪里，或是自动调整拖拽边界啥的。这些新技术肯定会让拖动功能更好使，更加随心所欲。

现在大家都用手机电脑，拖拽效果也得满足触摸屏的需求才行。以后，你大概能见到更牛逼的触控优化后的拖拽效果，就像支持多点触控和手势识别的那种。有了这些功能，哪怕是手上的小屏幕，拖拽起来也是溜溜的！

总结

说到底，拖拽功能在HTML5里可是一项非常有意思又好用的东西。通过设定能动性(draggable)属性、搞定拖拽事件、用上数据传输(dataTransfer)对象以及优化一下拖拽流程，咱们就能玩转各种形式的拖拽！不过要做这些小玩意儿，还得关注一些小细节和问题，以保证效果稳当靠谱。

最后，各位大神们，有没有遇到什么拖拽难关？怎么克服的也来说说。记得多给点评价哦亲！分享出去让更多人看到这篇好文！