本文详细介绍了HTML5的拖放功能，包括拖放流程中的选中、拖动和释放事件，以及如何通过设置draggable属性使元素可拖动。在拖放过程中涉及到的事件如dragstart、drag、dragend、dragenter、dragover、dragleave和drop，并解释了如何处理这些事件以实现拖放功能。同时，文章提到了DataTransfer对象在拖放过程中的作用，以及浏览器对拖放功能的支持情况和一些兼容性问题。
前言
拖放(drap && drop)在我们平时的工作中，经常遇到。它表示：抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。我从几个方面学习并实践这个功能。
拖放的流程对应的事件
我们先看下拖放的流程：
选中 ---> 拖动 ---> 释放
然后，我们一步步看下这个过程中，会发生的事情。
选中
在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。
图片和链接按住鼠标左键选中，就可以拖放。
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。
draggable属性：设置元素是否可拖动。
语法：
true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动
拖动
每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始-->拖动过程中--> 拖动结束。
针对对象
事件名称
说明
被拖动的元素
dragstart
在元素开始被拖动时候触发
drag
在元素被拖动时反复触发
dragend
在拖动操作完成时触发
目的地对象
dragenter
当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover
当被拖动元素在目的地元素内时触发
dragleave
当被拖动元素没有放下就离开目的地元素时触发
dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();
释放
到达目的地之后，释放元素事件
针对对象
事件名称
说明
目的地对象
drop
当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。
选中拖动释放例子
拖放示例-文本.src {
display: flex;
}
.dropabled {
fle
最低0.47元/天 解锁文章
扫一扫
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
