刚开始玩HTML5，我发现拖放功能真的超好用！你想想看，我们不是经常在电脑上拖东西吗？只要点两下然后拖就行了。现在，HTML5把这种方便带给网页了，让我们可以随心情轻松拖拽网页元素。这回儿，我来聊聊我是怎么认识这个拖放神奇的，还给你们讲讲自己用着有多爽！
拖动我!
draggable属性的设置
想让网页里的东西能拖，就得给它加个`draggable=”true”`，超简单！比如想把图片搞成可拖拽的，就在<img>标签后加上这么几个字儿就行了。然后用户就能轻松地用鼠标拖着这张图片到处跑。
拖放事件的触发
拖放的时候，浏览器会帮你搞定一大堆事，就像有个助手一样。比如说，当用户刚刚开始拖动某个东西的时候，`ondragstart`这个事件就会出现，这时候你就可以做点准备工作，比如说记下被拖动的那个东西是什么。等人家拖完了之后，就是`ondragend`事件出场，那时候你就可以把之前记录下来的信息处理掉。这样一来，你就能随心所欲地掌控整个拖放过程，想怎么玩就怎么玩！
nbsp;html>HTML5拖拽 #div1 {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)); }
dataTransfer对象的使用
你知道吗？拉拽过程中的`dataTransfer`可是个大功臣！我们不但能用它传东西，还能设置要拖拽的元素的属性，比如说把数据类型设成“Text”，值填上元素的id，等拖完之后，用`getData()`就能得到这些数据。这个功能在做高级拉拽互动，比如不同地方间传送乱七八糟的信息时特别好用。
拖放行为的限制与控制
虽然拖放功能超给力，但是咱们还是得好好把握下它。比方说，用那个叫`dropEffect`的东西能设定目标上允许多种拖放方式。可要是用到的行为跟那个`effectAllowed`里头的不一样，那就会拖放失败。这样就能避免出现一些意外的拖放情况，让大家用起来更顺手。
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
实际开发中的应用
咱们的网页开发里，拖放功能用得挺多。比方说，做那个任务管理软件，就能让大家随意换任务的位置，方便极了；又比如，看图家们能轻松给图片分类，不用再费劲儿找。这样一来，网页的功能更强大，操作起来也更简单明了。
event.preventDefault()
面临的挑战与解决方案
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
虽然拖放的确方便了很多，但是在做开发的时候还是有些麻烦的地方。比如，不同的浏览器处理拖放事件就可能有差别。为了搞定这个，得去各种浏览器试试看，还得写点兼容性的代码。还有就是，拖动太多东西的话，拖动操作的速度会变慢，所以要想办法提升它的性能。
总结与展望
总之，HTML5里的拖放功能让网页建设方便多了。用起来舒心，还能给我们开发者打开新的想象之门！随着科技发展，我觉得这功能肯定能越来越强大，应用在网页上的可能性也是大大滴有！
最后，给大家问你一个问题哈：你们用过哪些网页应用，里面的拖放功能超好用哒？快来评论告诉我们，顺便点个赞分享出去！
评论0