拖拽神器！解锁拖拽技能，让元素自由飞~

拖拽之后效果

拖拽功能在做网页时真的是非常方便，不仅能让你随心所欲地移动元素位置，还能自由调整它们的顺序。不过有时候，默认浏览器设置可能让人感到困扰，这时候就该提请大家注意用一下 preventDefault()阻止器了！下面，就给大家讲一讲怎么才能更好地运用这个阻止器和Datatransfer.getData()方法，来获取被拖动的数据，提升你们的技能水平哦～

设置元素为可拖放

#p1, #p2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}


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



<img src='/i/w3school_logo_black.gif' alt='拖拽神器！解锁拖拽技能，让元素自由飞~' />
<p id="p1">
 </p>
<p id="p2"></p>

拖东东超级简单！把’style.mouseup’设成’string(true)’,每个元素就能随便跑了，想拉哪儿拉哪儿~

拖拽，就是ondragstart和setData兄弟俩。

当你开始动手移动某个玩意儿的时候，onDragStart事件就激动起来！这时候，你就要使用dataTransfer.setData()小技能，把数据打上标签，比如说，如果你要移动叫“drag1”的东西，那么只需要选好文本类型，敲入”drag1″就大功告成喽，拖东西的时候，你就能看清自己正搬的是什么！

放到何处- ondragover

拖动时要找个地方放资料，ondragover这个家伙很关键！要知道，浏览器虽然允许我们随便拖，但也不能太任性呀。这时，用event.preventDefault()就搞定了，告诉浏览器不要白费劲。然后，就可以专心制定放置物品的规则。

进行放置- ondrop

摸摸头，放下鼠标就要触发那个”drop”事件了~别纠结，快跳，这样就能交给特定的函数处理要放哪儿的东东。偷偷告诉你个酷炫的方法，用preventDefault()可以防止浏览器自动操作，再也不怕遇到麻烦。还有一个超级好用的招数，dataTransfer.getData(“Text”)，让你轻轻松松拿到被拖动过去的数据，大胆去创想！

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

优化用户体验

你知道preventDefault()这个怪招吗？它能让你的网页变得好玩儿得多！比如说，我们常看的图片排序还有要传的文件啥的，都能用这个方法搞定。

兼容性考虑

记住，用preventDefault()时得注意浏览器相容问题！因为每个浏览器拖拉起来反应可不太一样。这就需要咱们写点特别的代码来适应这些差别的了，这样网页才能在各种浏览器里顺畅跑起来呀~

实际应用场景

别踩坑，preventDefault()超实用！搞在线画板时能用上它，妥妥搞定浏览器默认动作，让作品不被破坏。表格排版也是一样，用这招设定规则，排序瞬间顺滑。

event.preventDefault()

进阶技巧与总结

别小瞧preventDefault()，它的用处可不少，还能配合其他的方法更强大或和CSS3动画一起玩儿。亲身试过才能真正明白这玩意儿。所以，学得溜，对前端开发很关键！

上次咱聊了如何用preventDefault()来改善拖拽的效果，大家都学到了没？