vue 使用 html5 拖拽属性 draggable

1、先在div中设置

<div draggable="true" @dragstart="dragStartHandle($event, item)"></div>

2、监听 dragstart 拖拽事件

// 拖拽处理
const dragStartHandle = (e, item) => {
    console.log('开始拖拽')
    var data = '我的数据';
    // 传参
    e.dataTransfer.setData("index", data);
}

3、获取拖拽参数

<div @drop="handleDrop($event)" @dragover="handleDragOver"></div>

4、监听

const handleDrop = (e) =>{
    e.preventDefault()
    e.stopPropagation()
    const index = e.dataTransfer.getData('index')
    console.log('拖拽成功了', index)
}

注意：这里必须要加 preventDefault()，防止浏览器阻止 drop 事件的默认行为。如果没有调用 preventDefault()，浏览器将不会触发 drop 事件；stopPropagation() 是为了阻止事件的进一步传播或冒泡

到这里就拖拽成功了，具体的拖拽处理需要自己完善了。