Vue3 自定义拖拽指令实现

在Vue3中，我们可以使用自定义指令来实现拖拽功能。自定义指令提供了一种方便的方式来扩展Vue组件的行为。下面是一个简单的示例，演示如何创建一个自定义拖拽指令。
首先，我们需要创建一个Vue3组件，并在其中定义一个名为v-draggable的自定义指令。该指令将用于处理拖拽逻辑。

// 导入 Vue 实例
import { createApp } from 'vue';
// 定义一个名为 v-draggable 的自定义指令
const draggableDirective = {
// 当被绑定的元素被挂载到 DOM 中时……
mounted(el, binding) {
// 获取指令的参数值
const options = binding.value || {};
// 添加拖拽事件监听器
el.addEventListener('dragstart', (e) => {
// 阻止默认行为，以允许拖拽操作
e.preventDefault();
});
// 添加拖拽事件监听器
el.addEventListener('dragover', (e) => {
// 阻止默认行为，以允许放置目标
e.preventDefault();
});
// 添加放置事件监听器
el.addEventListener('dragenter', (e) => {
// 获取放置目标元素
const target = e.target;
// 检查放置目标是否允许放置操作
if (isValidDropTarget(target)) {
// 设置放置目标样式，以显示放置效果
target.classList.add('drop-target');
}
});
// 添加放置事件监听器
el.addEventListener('dragleave', (e) => {
// 移除放置目标样式，以隐藏放置效果
e.target.classList.remove('drop-target');
});
// 添加放置事件监听器
el.addEventListener('drop', (e) => {
// 阻止默认行为，以防止浏览器打开文件或跳转到页面顶部等行为
e.preventDefault();
// 获取放置目标元素
const target = e.target;
// 检查放置目标是否允许放置操作
if (isValidDropTarget(target)) {
// 在放置目标元素上执行操作，例如更新数据或触发其他事件等。这里只是一个示例，实际情况下需要根据你的需求进行处理。
console.log('Dropped:', e.dataTransfer.getData('text/plain'));
target.classList.remove('drop-target');
}
});
},
};