大家好！今天来聊聊HTML5里面一个很神奇又超级好用的API——拖放功能。它能让你在网页上随意拖拽东西，再也不用为了实现这效果使劲敲打那些难懂的JS代码。其实，就是通过监听元素的拖动和放置两种事件，就能玩转各种拖放功能。是不是觉得超赞？
拖放API的基本设置
首先，想使元素能拖动，就得给它加上一个叫draggable的属性，然后把属性值调成true。如果这属性是false的话，那你就无法拖动这个元素。但有些特定类型的元素，比如img和a，它们本来就能拖动，因为默认情况下它们的draggable属性就是true。不过要是你不喜欢这些元素能被拖动，那直接将其属性值改为false即可。
拖放过程中的不同事件
拖放操作里头，会有意想不到的事情发生！你注意看，当咱们准备把东西从一个地方移到另一个地方时，首先是要有个dragstart事件，这个事件就像是启动按钮一样，它告诉我们，就要开始拖动了哦～；然后，每当你的鼠标移动或者食物在屏幕上悬停停留的时候，就会有drag事件，一直在提醒我们；最后，当我们终于把东西放在目的地的时候，就会有一个dragend事件出现！除了以上三个基本事件外，还有另外几个常见的小孩——它们分别叫做dragenter、dragover和drop。这几个可能有点陌生哈？别着急，让我给你好好解释一下。比如说，当我们打算把某个物品拖向另一个流程图时，会先看到dragenter事件，意思就是说我们“进入”那个流程图的范围啦；接着会触发dragover事件，表示我们还在那个范围内活动；最后就是drop事件，当我们把东西“扔”在了正确的位置上，形状恰好合适的时候，这个事件就跳出来。
数据传递对象dataTransfer
a元素
b元素
c元素
var source = document.getElementById('source'), // a元素 process = document.getElementById('process'), // b元素 target = document.getElementById('target'); // c元素 source.addEventListener('dragstart',function(ev){ // dragstart事件由a元素产生 console.log('a元素开始被拖动'); },false) process.addEventListener('dragenter',function(ev){ // dragenter事件由b元素产生 console.log('a元素开始进入b元素'); },false) process.addEventListener('dragleave',function(ev){ // dragleave事件由b元素产生 console.log('a元素离开b元素'); },false) target.addEventListener('drop',function(ev){ // drop事件由c元素产生 console.log('a元素拖放到c元素了'); ev.preventDefault(); },false) document.ondragover = function(e){e.preventDefault();}
说到拖拽，你得了解dataTransfer这个东西，主要是在拖拽过程中传输数据用的。简单说，就是你可以存储些数据到dataTransfer里，又能读出里面的数据，若是多了还能清掉。最厉害的是，你还能用img元素设定拖拽的图标！
实战案例：拖放排序
下面咱们来说说如何用拖放API搞一个简单的拖放排序功能，挺实用的，你知道吗？这个功能就是咱们平时那种可以随便拖动列表元素那个样子。首先，我们得让每一个元素都能拖动起来，也就是把它们的draggable属性设成true。紧接着，就要打起精神听听每个元素的“起步声”——dragstart事件，然后做好标记，记住正在拖的那颗星是谁。然后，还要注意下一步，那就是当它（源对象）靠近自己的时候，咋办？没错，就是添它到自己前面去，这招儿应该懂！这样一来，后面的兄弟们也就自觉地给前面的让路，自然而然就形成了顺序。但是如果目的地元素已经是最末尾的一个了怎么办？这时候就得留心听一下离别的声音——dragleave事件，当它一边凉快去之后，也就无家可归了，咱赶紧把它安置在最终站——结尾那里就行了。
event.dataTransfer.setData('text/plain','Hello World');
拖放API的注意事项
用拖放API时还得留意几点。首先，你得确定目标对象能被拖过来，这个时候就得在dragover事件里调用防止跳转的preventDefault方法了。而且别忘了，dragenter和dragover这俩事件的初始设定就是不让放东西，所以赶忙用preventDefault方法处理一下。
event.dataTransfer.getData('text/plain');
拖放API的高级应用
不只是简单的拖放排个序这么简单！这个接口能帮你完成更多复杂任务，比如说拖放上传文件啦、拖动调整布局啦等等。这样子做出来的网页会变得更灵活好用，用户体验也会大大提升哟~
event.dataTransfer.clearData();
总结与互动
看了今天的分享，大家应该都明白了HTML5的拖放API怎么回事。这个功能挺好用的，学会也不难。大家可以试试用它做项目，弄点新鲜的用户互动玩法出来。说到这里，我想问问大家：你们在真实生活中的软件开发里尝试过用拖放API吗？遇到了什么问题？是怎么解决的？快来评论区说说。还有，别忘了点赞转发这篇文章！
var source = document.getElementById('source'),
icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart',function(ev){
ev.dataTransfer.setDragImage(icon,-10,-10)
},false)
评论0