HTML5拖放的基本概念
现在网页设计绝对少不了HTML5，尤其是那个鼠标拖曳特效，真的好赞呀~只要轻轻一拉就行，超流畅的！简单解释下“拖放”就是你可以随心所欲地移动页面元素，感觉特别方便。最棒的是，HTML5已经将这个功能标准化，无论是什么对象都可以随意拖来甩去。
拖动事件与放置事件
HTML5的拖放功能，其实就是搞定下面两件事儿。当你开始拖某样东西时，“drag”事件马上给你反应，让你知道自己到底在干。然后，当你把东西慢慢放下时，“drop”事件自动跑去目的地等着，只要那儿能接得稳，它就马上喊出声来：“诶哟喂，主人来了！”所以这活干起来就像行云流水，从起点直接到达终点，轻松搞定哦～
浏览器对HTML5拖放的支持
很多浏览器都能用上HTML5的拖拽功能，不过要注意的是Safari版本5.1.2就不行哦～所以在制作网页时要考虑到不同的浏览器这样才能提供更好的用户体验！
实例演示：简单的拖放效果
下面我们通过一个简单的实例来演示HTML5的拖放功能：
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)); }
<div id="drag1" draggable="true" ondragstart="drag(event)">我可以被拖动</div>
将我拖到这里</div>
来看这个，比如 Drag1，这家伙就是那种可以随便拖动的东东。再来看看Drop1，它得会选位置落下，还得有点个性，一旦到位就得赶紧有所行动。
详细步骤：实现拖放功能
接下来，我们将详细介绍如何实现HTML5中的拖放功能：
1.设置元素为可拖动
搞定这事儿挺容易滴，就两步完成！首先，把HTML代码里你想拖动的玩意儿（比如“=”这个符号）加个“draggable”=“true”，这下子你就能随心所欲地拖来拖去~举个例子，我们可以这样写：
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }html
简单点说，不如我们就把那个叫drag(event)的小玩意儿放这ondragstart事件上来试试看，挺好玩的。在这个小程序里头，你能详细说说你要拖啥，比如是啥类型的东西之类的都行！怎么用？这可真是太容易，只要用dataTransfer.setData()这个神奇的招式，就能搞定传输的信息了。
2.放置位置设置- ondragover
选好把数据拖到哪里之后，记得用 ondragover 这个功能。别忘了，照理说不能直接把数据扔进其他元素里，所以要用上event.preventDefault()阻止它默认的行为咯。
3.完成放置- ondrop
东西全放好后，你得去调用下drop(event)这个函数，顺便别忘了加个preventDefault()防住浏览器瞎动。这样就搞定！
搞定这些关键点，你就能轻松驾驭HTML5的拖放功能！页面美得不像话，使用体验超级舒服，让你的网站瞬间有趣不少！
进一步探索：更多关于HTML5拖放
除了基础知识跟例子外，HTML5给咱们准备了不少好用的小工具和动态效果，让派对更有趣！比如，在ondragenter或ondragleave这样的事件上耍点花招，赶紧得瑟起来~；还有那个神奇的dataTransfer，它里面有个getData()方法，能帮我们轻松获取到选择内容里的所有细节
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }说实话，HTML5就是牛逼得多，完全由你自己发挥，想怎么弄就怎么弄，那些有趣实用的交互效果都能轻松做出来。只要学个大概，再实践一番，你就能熟练掌握HTML5的新技能，然后打造出超赞的网页应用咯！
评论0