实现元素可拖拽排序方法

属性和事件

draggable 属性是 HTML5 新增的可拖拽属性。需设置draggable值为true

<div draggable="true"> 元素可拖拽</div>

• 拖拽元素的事件

事件	触发时机
dragstart	开始拖拽时执行 1 次
drag	拖拽开始后多次触发
dragend	拖动结束后触发 1 次

• 可释放目标事件

事件	触发时机
dragenter	拖拽元素进入可释放目标时执行 1 次
dragover	拖拽元素进入可释放目标时触发多次（100毫秒触发一次）
drop	拖拽元素进入可释放目标内释放时(设置了dragover此事件才会生效)

可放置目标

dragenter 或 dragover事件可用于表示有效的放置目标，也就是被拖拽元素可能放置的地方。

设置允许被被放置还需要阻止 dragenter 和 dragover 事件的默认处理。

<div ondragenter="event.preventDefault()">

示例

DataTransfer 对象

DataTransfer 对象用于保存拖拽过程中的数据、设置拖动类型等。在所有拖动事件 event的 dataTransfer 属性上都能获取到 DataTransfer 对象。

• dataTransfer.dropEffect设置拖拽的操作类型。值必须是none, copy, link 或 move。

function dragover(e) {
    e.preventDefault()
    e.dataTransfer.dropEffect = 'move'
}

Vue3 中拖拽排序

使用 sortable.js 进行表格排序

npm i sortablejs -S

<script setup>
import Sortable from 'sortablejs'
import { onMounted } from 'vue'

// 开始排序
const setSort = () => {
    // 表格
    const el = document.querySelector('#dragTable table tbody')
    new Sortable(el, {
        sort: true,
        ghostClass: 'sortable-ghost',
        onEnd: (e) => {
            const targetRow = tableData.splice(e.oldIndex, 1)[0]
            tableData.splice(e.newIndex, 0, targetRow)
            console.log(tableData)
           },
	 })
    }
onMounted(() => {
    setSort()
})


</script>

注意

使用ElementUI中的el-table组件结合sortable.js做拖拽排序时，el-table组件需要设置row-key属性，避免更新渲染错误