原生拖拽功能

拖拽

在html5中新增了 draggable 属性，让我们可以实现拖拽功能。

拖拽元素

首先给要拖动的dom元素设置 draggable 为 true，然后绑定 dragstart 方法

<div class="component" @dragstart="dragstart" :draggable="true" data-index="1"></div>

const dragstart = (e: MouseEvent) => {
    e?.dataTransfer.setData("index", e?.target?.dataset.index);
}

拖拽目标区域

注意：要先设置 dragover 方法

<div class="content" @dragover="e => e.preventDefault()" @drop="handleDrop"></div>

const handleDrop = (e: MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    index.value = e?.dataTransfer?.getData("index");
}