本文主要内容分三个部分。先写了在 Vue3 中利用 HTML5 的 draggable 属性手写实现列表拖拽排序的功能。接下来记录了在 Element Plus 组件库中结合 sortable.js 使用,对表格组件 el-table进行拖拽排序的。最后一个部分是 vuedraggable 拖拽组件的使用。
本文基于 Vite、Vue3、Element Plus 技术栈
draggable 实现拖拽排序
属性和事件
draggable 属性是 HTML5 新增的可拖拽属性。
在 HTML 中,除了图像、链接和选择的文本默认可拖拽外,其他元素默认是不可拖拽的。如果想让其他元素变成可拖拽的,首先需要把 draggable 属性设置为 true。
html复制代码<p draggable="true"> 可拖拽</p>
设置完成之后,还需要结合一些事件才能完成拖拽:
- 拖拽元素的事件
事件 |
触发时机 |
dragstart |
开始拖拽时执行 1 次 |
drag |
拖拽开始后多次触发 |
dragend |
拖动结束后触发 1 次 |
- 可释放目标的事件
事件 |
触发时机 |
dragenter |
拖拽元素进入可释放目标时执行 1 次 |
dragover |
拖拽元素进入可释放目标时触发多次(100毫秒触发一次) |
drop |
拖拽元素进入可释放目标内释放时(设置了dragover此事件才会生效) |
可放置目标
dragenter 或 dragover事件可用于表示有效的放置目标,也就是被拖拽元素可能放置的地方。
设置允许被被放置还需要阻止 dragenter 和 dragover 事件的默认处理。
html复制代码<div ondragenter="event.preventDefault()">
做一个例子来理解 可放置目标:
DataTransfer 对象
DataTransfer 对象用于保存拖拽过程中的数据、设置拖动类型等。在所有拖动事件 event的 dataTransfer 属性上都能获取到 DataTransfer 对象。
- dataTransfer.dropEffect设置拖拽的操作类型。值必须是none, copy, link 或 move。
js复制代码function dragover(e) {
e.preventDefault()
e.dataTransfer.dropEffect = 'move'
}
- 传递数据 (不建议使用这种方法,可能有兼容问题)只能在drop事件中接收(测试的时候在其他拖拽事件中获取不到)
js复制代码function dragstart(e, index) {
e.stopPropagation()
e.dataTransfer.dropEffect = 'move'
// 传数据
e.dataTransfer.setData('text/plain', '111111111')
}
function drop(e) {
// 接收数据
console.log(e.dataTransfer.getData('text/plain'));
}
Vue3 中拖拽排序
根据上面描述的属性和事件在 Vue3 编写一个拖拽排序