HTML5出来了许多的新特性,拖放就是其中比较有用的特性之一,可以应用到许多业务场景中去,通过这个新特性,我们也可以实现许多有趣的例子。
先看一个通过拖放实现的小Demo:
概念
拖放是H5的新特性,即抓取对象以后拖到另一个位置,但是前提是这个元素设置了属性draggable=true
,才能让该元素具有拖放功能。
拖放具有三个过程,即:开始拖动
-> 拖动中
-> 放置元素
- 开始拖动:指触发拖动的元素的过程,比如轻按元素时;
- 拖动中:移动拖动中的元素;
- 放置元素:把拖动的元素,放置到另一个元素里面的过程。
在不同的阶段,都有其相对应的API
,下面我们就看看这些API
。
事件
H5的拖放有如下6个API
供使用:
ondragstart
ondrag
ondragend
ondragenter
ondragover
ondrop
上面可以看到我写这些API
分两种情况,前三个是拖动的元素对应的API,后三个是放置的元素的API。
例如:我要把div#box1
拖动到div#box2
,那么div#box1
就该监听dragstart
和dragend
,而div#box2
就监听另外三个。
对象 | 事件 | 描述 |
---|---|---|
拖动的元素 | dragstart | 触发拖动时就会执行 |
drag | 触发拖动后拖动元素过程触发 | |
dragend | 拖动结束后触发 | |
放置的元素 | dragenter | 当拖动的元素进入绑定的元素区域里就会触发 |
dragover | 当拖动的元素在放置的元素区域里移动就会触发 | |
drop | 当拖动的元素在放置的元素区域里释放就会触发 |
注意:drop
事件在一些浏览器上可能不会触发,这时需要在dragover
和drop
事件里面阻止浏览器默认事件:
addEventListener('dragover', e => {
e.preventDfault()
})
addEventListener('drop', e => {
e.preventDfault()
})
另外,拖动移入移出的判定是通过鼠标的位置,而不是拖动的元素的位置。
事件顺序:
- 拖动时(未进入放置元素区域):
ondragstart
->ondrag
->ondragend
- 拖动时(进入放置元素区域):
ondragstart
->ondragenter
->ondragover
->ondrag
->ondrop
->ondragend
数据传递
元素拖放的过程,往往是需要数据传递的,比如放置时要获取拖动元素的状态,其中就可以通过dataTransfer
这个对象来传递数据。
通过在dragstart
开始阶段设置状态,然后再drop
时获取状态,再进行其他操作。
addEventListener('dragstart', e => {
e.dataTransfer.setData('msg', 'hello')
// 传递对象
// e.dataTransfer.setData('greet', JSON.stringify({ msg1: 'hello', msg2: 'good morning' }))
})
addEventListener('drop', e => {
const msg = e.dataTransfer.getData('msg')
// TODO
e.preventDfault()
})
注意,这里的setData
只能设置字符串,如果是对象的话,请通过JSON.stringify
来序列化。
兼容性
兼容性还是存在一些问题,具体可以看看caniuse。
总结
如果觉得写原生拖动麻烦,这里还推荐再次封装过的sortable.js库,功能强大,使用也不难;
拖动这个特性的应用还是比较广泛的,但因为是H5
新特性,兼容在一些浏览器上还是存在一定问题,所以依据项目情况使用。
这里也介绍的全是基础用法,详细的可以去看看MDN文档。
评论区
欢迎你留下宝贵的意见,昵称输入QQ号会显示QQ头像哦~