VueUse Drag and Drop 怎么用？看完这篇就懂了！

在前端开发中,实现拖拽功能是一个常见的需求，VueUse 提供了 Drag and Drop 工具，能让我们轻松实现这一功能，那 VueUse Drag and Drop 具体怎么用呢？下面就来详细介绍。

安装与引入

你需要安装 VueUse，可以通过 npm 或者 yarn 进行安装。

如果使用 npm，命令是：npm install @vueuse/core；如果使用 yarn，命令是：yarn add @vueuse/core。

安装完成后,在你的 Vue 组件中引入 Drag and Drop 相关的函数。

```javascript import { useDraggable, useDropzone } from '@vueuse/core' ```

实现简单的拖拽元素

（一）使用 useDraggable

假设你有一个 div 元素，想要让它可以被拖拽，你可以这样做：

```html ```

在上面的代码中,我们通过 ref 创建了一个引用 dragRef，然后在 onMounted 钩子中使用 useDraggable 函数，将 dragRef 传入，这样，这个 div 元素就可以被拖拽了。

（二）自定义拖拽行为

你可能希望对拖拽行为进行一些自定义,比如限制拖拽的范围。

```javascript const { stop } = useDraggable(dragRef, { // 限制在父元素内拖拽 parent: true, // 可以设置拖拽的边界 bounds: { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight } }) ```

通过传递第二个参数对象,你可以设置各种选项来自定义拖拽行为。

实现拖放区域（Dropzone）

（一）基本使用

如果我们想要一个区域,当拖拽元素进入这个区域时触发一些操作，就可以使用 useDropzone。

```html ```

在这个例子中,我们定义了一个蓝色的 dropRef 区域，通过 useDropzone 函数，设置 accept 为 dragRef（表示只接受 dragRef 元素的拖放），然后在 onDrop 回调中处理拖放事件。

（二）更多事件处理

useDropzone 还提供了其他事件，onDragEnter（元素进入拖放区域时触发）、onDragLeave（元素离开拖放区域时触发）等。

```javascript const { onDragEnter, onDragLeave, onDrop } = useDropzone(dropRef, { accept: dragRef }) onDragEnter((e) => { console.log('元素进入了蓝色区域') }) onDragLeave((e) => { console.log('元素离开了蓝色区域') }) onDrop((e) => { console.log('元素被拖放到了蓝色区域') }) ```

通过这些事件,我们可以更细致地控制拖放过程中的交互。

在实际项目中的应用场景

（一）文件管理器

在类似文件管理器的应用中,我们可以使用 Drag and Drop 来实现文件的拖拽移动、复制等操作，用户可以将文件从一个文件夹拖拽到另一个文件夹，通过监听拖放事件来处理文件的移动逻辑。

### （二）任务看板

在任务看板应用中,任务卡片可以被拖拽到不同的列表（如“待办”“进行中”“已完成”），通过 useDraggable 使任务卡片可拖拽，useDropzone 定义每个列表区域为拖放区域，根据拖放事件更新任务的状态。

### （三）界面布局调整

对于一些可自定义布局的界面,比如仪表盘，用户可以拖拽不同的组件模块到不同的位置，利用 Drag and Drop 功能，我们可以轻松实现组件的拖拽定位，提升用户体验。

注意事项

（一）兼容性

虽然 VueUse 尽量保证兼容性，但在一些老旧浏览器中可能需要进行额外的 polyfill 处理，可以通过检查浏览器特性，或者使用一些兼容性库来解决。

### （二）性能优化

当页面中有大量可拖拽元素时,要注意性能问题，可以通过限制不必要的重绘、合理使用虚拟 DOM 等方式来优化性能，对于一些复杂的拖拽元素，可以使用 CSS 的 transform 来实现移动，而不是直接修改 top 和 left 属性，因为 transform 触发的重绘较少。

### （三）事件冲突

如果页面中还有其他的事件监听（比如点击事件），要注意拖拽事件和其他事件的冲突，可以通过事件委托、合理设置事件触发条件等方式来避免冲突，在拖拽过程中，阻止点击事件的默认行为。

VueUse 的 Drag and Drop 功能为我们在 Vue 项目中实现拖拽交互提供了便捷的工具，通过简单的安装、引入和配置，我们可以快速实现各种拖拽和拖放功能，在实际应用中，要根据具体的业务场景进行合理的自定义和优化，同时注意兼容性、性能和事件冲突等问题，希望这篇文章能帮助你更好地使用 VueUse Drag and Drop，让你的前端应用更加生动和交互性强。