详解 HTML5 原生拖拽操作：原理、步骤与应用

一、项目初期的困惑与挑战

我新搞了个东西，可是用vue拖拽好难！我装了vue全家桶和vuedragable这个插件，但还是很卡，影响用户体验，整组人都挺烦的。

说到这个问题，咱们赶快复习以下H5中的拖放功能，看看应该怎么办！实际上，制作H5拖放功能只需要两步骤哦：先将元素设置为“可拖动”，再编写一段拖放脚本来实现。虽然看似简单，但这仅仅是解决问题的第一步。

二、jQuery库的初步尝试

说起拖拽，jQuery就够用。这个厉害工具，能帮我们解决各种各样的麻烦拖拽问题。就拿拖动东西举例，当你拖动时，其实就是在做draggingstart、dragging、draggingend这三个环节，拖拽就是这样子一目了然！

关于咱们的dragend，你扔出去啥东西，松手后它就立刻弹回来了。记住这个窍门儿，拖拽起来就会容易好多！经过这次活动，大家对于拖动事件都有了更深刻的理解哈。

三、深入探索H5拖拽的原理

搞定拖动后，咱得搞清楚H5里面的拖拽到底咋回事。原来就是当咱们把能拖的东西扔进容器里时，dragenter、dragover还有dragleave这几个事儿就出来了。不过，关键还得看这个dragover，只要在拖着，它就在那儿，帮咱们调整拖动时的视觉效果！

简单地说，拖动物品就得挪到你想要的地方。关键在于那个“扔”的动作，这个动作直接决定了搬家的成败！把这几个要点弄明白了，每次拖东西都会更顺手！

    

        
优
        
良
        
中
        
差
    
    
        //没有任何JS代码
    

四、解决多浏览器兼容性问题

现在有点烦心事儿是，浏览器兼容性的问题，比如Chrome和Opera能轻松拖曳某个元素，Firefox就不行了。咋办？解决办法其实挺简单，先绑定好要拖拽的元素的dragstart事件处理函数，再在里面用上event.dataTransfer.setData这个方法就成了！

     

        
优
        
良
        
中
        
差
    
    $('.canDrog > li').bind('dragstart',function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",'1');
    });

哈喽，告诉你，Chrome和Opera在往对象里面拖东西时，有时候不提示放开鼠标，有点不太方便对不对？那咱们就给这个容器加上个”悬停”事件（也就是dragover），这样就能解决问题了。虽然看起来有点复杂，但为了让拖拽效果在各种浏览器上都一样，这点可不能忽视。

五、优化拖拽体验

搞定基本功能和兼容性后，咱就试下拖动效果吧～在火狐浏览器里，有时候一不小心手一松，拖着的东东就飞到新页面去了……为了解决这个小问题，我们给”drop”钩子添了点儿代码，让浏览器别乱来。

     

        
优
        
良
        
中
        
差
    
    

            

                

                    
节次/星期
                    
周一
                    
周二
                    
周三
                    
周四
                    
周五
                
            
            

                

                    
第一节
                    

                    

                    

                    

                    

                
                
            
    

    $('.canDrog > li').bind('dragstart',function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",'1');
    });
    //google chrome,opera需要添加
    $(".dataTbl").bind("dragover",'td',function(e){  
        e.originalEvent.preventDefault();  
    })  

说实话这个优化真的太实用了！不仅解决了头疼的大问题，连拖拽都顺畅得不得了。虽然折腾了一番，但是至少也学会了如何更溜地玩转H5拖拽功能！

六、总结与展望

搞定H5拖拽后，项目啥问题都没了，我们的技术也突飞猛进。虽然辛苦些，但每次尝试都有新收获，这不就是学前端必须不断学习和实践！

大家好！你们遇到过棘手得头大的项目吗？快来分享说明下解决方法，在评论区聊聊呗。觉得好玩就点个赞或者转发，让别人也能学到东西。

    //将元素释放到当前元素中
    $('.dataTbl').bind('drop','td',function(event){
        console.log('+++drop');
        event.preventDefault();
        event.stopPropagation();
    });