H5 Drag 与 Drop 注意事项及实战案例，你知道多少？

亲们好！今天咱们就来说说HTML5里面那个看上去有点神秘的“拖拽”功能，其实就是可以让你在网页上随心所欲地移动元素。是不是感觉超酷的？那就跟着我一起来揭开这个神奇功能的面纱！

拖放其实是啥？

拖动我!

说起拖放，你是不是立刻想到了桌面上的那些图标？网页上的东西用HTML5的拖放功能就能DIY了，移来移去的挺有意思的。而且还特有实在感，让网站瞬间变活泼起来！

哪些浏览器支持拖放？

其实，拖放这个功能并不是每个浏览器都支持，比如IE9往上，火狐，opera，GoogleChrome还有苹果的Safari才行。但要注意，Safari从5.1.2以后就不支持了。所以，为了让你们的网站更兼容，得留个心眼儿哟。

nbsp;html>

#p1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
拖动img_w3slogo.gif图片到矩形框中:


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));
}

拖放的基本步骤是啥？

首先，给要拖动的东西贴个“可拖动”的小标签（也就是设下’draggable’=’yes’）就行。然后？就看准大好时机，瞅瞅拖动和放下时都有啥变化。这时候就要留意几个特别的事件，像”ondragstart”，”ondragover”还有”ondrop”什么的。这些事件能帮咱们抓住整个拖放过程！

拖放中的事件是怎么回事？

拖动东西可有大用处！就比如说`ondragstart`这个函数，当你开始动手的那一刻就会被它捕捉到；然后是`ondragover`，这家伙在你找到能放下东西的地儿时就兴奋地蹦出来了；最后是`ondrop`，当你手一松，它就迫不及待地出现了。明白它们的话，你就真的可以任意摆布拖放功能！

数据传输是怎么操作的？

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

拖拽时，咱们就靠那个叫’dataTransfer’的家伙来传数据！用它里面的’setData’方法，就能给拖动的东西加点儿料，比如文字或元素的ID啥的。等东西放下后，再用’getData’方法把刚才加的东西找回来，继续后面的事儿。

拖放的实战案例

咱们说说最简单的那种，假设你手头有张列表，想要大家可以随心所欲地移动列表项改变顺序，那就得给每个列表项加个“可拖动”的标签。接着，在`ondragover`事件上搞点小动作，让人家能顺利放下；最后，在`ondrop`事件上做出反应，完成真正的放置操作。这样一来，简单易懂的拖放排序功能就轻松搞定了！

event.preventDefault()

火狐浏览器的问题

火狐浏览器有时候拖动会弹出新页面，实在是烦人得很。不过不用怕，只要在`ondrop`方法里加上`preventDefault`就能搞定了！这样一来，火狐浏览器的拖放功能就能正常用~

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

总结与思考

哈喽！聊聊HTML5拖放那点儿事儿呗，从基础到实战，现在你们是不是觉得更懂些了？拖放让网页变得好玩又好用。那大家平时做开发时都用到过拖放吗？有没有遇到什么特别的问题？快来评论区分享下经验和看法，别忘了点赞分享！