入门教程,后续有时间会慢慢更新,下面是一个简单demo实现拖拽功能
<template>
<div>
<div ref="targetDom" id="div" @dragenter="dragenter">我是可放置目标</div>
<p id="drag" draggable="true" @dragend="dragend">我是拖拽元素,把我拖拽到上面去</p>
</div>
</template>
const targetDom = ref(null);
const dragover = (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
const dragend = (e) => {
e.preventDefault();
targetDom.value.appendChild(e.target);
};
#div {
width: 300px;
height: 80px;
padding: 10px;
border: 1px solid gray;
}