用 H5 实现拖放效果的注意事项及实战案例解析

哈喽伙计们！今天就来学学如何用H5搞定炫酷的拖曳效果，是不是觉得超神奇？放心，这玩意儿超级简单，咱们开始行动！

什么是拖放？

拖放？其实就是抓住东西往哪儿丢都行。网页设计里经常遇到这种事，比如能随便挪动列的内容，或者在画布上乱摆图标。现在HTML5也有这功能，随便你怎么搞！

浏览器支持情况

nbsp;html>  
  
  
      
      
        #p1{width:360px;height:220px;padding:20px;border:1px solid black;}  
      
      
        function allowDrop(ev) {  
            ev.preventDefault();  
        }  
        function drag(ev) {  
            ev.dataTransfer.setData("Text", ev.target.id);  
        }  
        function drop(ev) {  
            ev.preventDefault();  
            var data = ev.dataTransfer.getData("Text");  
            ev.target.appendChild(document.getElementById(data));  
        }  
      
  
  
    
  
    
  
      
  

现在大部分浏览器都支持拖拽功能，比如IE9+、火狐、奥鹏还有Google，连苹果的Safari也行。不过要注意，Safari5.1.2这个旧版本是不可以的喔，要是你还在用的话，赶紧升级！

如何让元素可拖动？

搞定拖拽功能就是这么轻松！你只需要在代码里加上`draggable=true`这几个字母。看，原本那个“拖我试试”的DIV现在可以随心所欲地拖来拖去~

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

拖动时会发生什么？

别怕拖不动的问题，有些操作咱们还是能掌控滴！比如ondragstart那个事儿，让咱们可以在那时候用个函数玩儿。再用dataTransfer.setData()这个招数，想弄啥数据进去都行，很自由的说~

如何放置被拖动的数据？

你或许还不清楚，拖拽操作还有个重要部分叫ondragover，它可是告诉你正在往哪儿动手！当然，咱们自己家里的东西可不能随便乱甩给人家，那就得用到event.preventDefault()来防止之前的动作执行了。

放置数据时的事件

一开始传数据可能会触发drop事件，不用担心！只要运行个小程序就能搞定。比如用dataTransfer.getData(“Text”)这个功能，可以把拖过来的数据直接放到目标元素里面去。

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

来回拖动的实现

简单死了！用老方法呗，比如直接复制那个body模块的代码，再稍微改下样式就成~

实战案例分享

别光说不练，咱们动手！比如想弄个任务清单，让大家随意拖动排序。先给每个项目贴个”可拖”标签，然后用点儿JavaScript实现拖放功能。这下子，大家就可以随便乱调清单顺序了。

注意事项

别忽视了拖和放的问题啦～还需要看看别的细微之处！毕竟每个浏览器显示的样子不同，所以我们要做兼容性的测试。另外一点就是，拖东西有可能会导致页面乱掉，所以设计时也要记着这点。

总结

看了这个文章，相信你们都会轻松搞定怎么做出H5里的拖放功能真的很容易，按照上面说的去做就行。各位童鞋们，有没有用H5玩过拖放呀？赶紧跟大家分享一下你们的经验，别忘给我点赞~