Vue-Draggable-Plus 拖拽数据获取机制详解

Vue-Draggable-Plus 拖拽数据获取机制详解

vue-draggable-plus Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-draggable-plus

核心概念

在 Vue-Draggable-Plus 这个基于 Sortable.js 的 Vue 拖拽组件库中，开发者经常需要获取拖拽过程中的数据。该组件库提供了两种数据模型：原始数据和克隆数据，这为开发者带来了灵活性的同时也增加了数据管理的复杂度。

数据模型解析

Vue-Draggable-Plus 维护着两个关键数据模型：

1. 原始数据 (source data)：这是被拖拽元素的原始数据，直接来源于绑定的数据源
2. 克隆数据 (cloned data)：当配置了 clone 属性时，组件会创建原始数据的副本用于拖拽操作

这种双数据模型设计使得开发者可以灵活控制拖拽行为，既可以选择直接操作原始数据，也可以通过克隆数据实现不影响原始数据的拖拽预览效果。

数据获取方案

getCurrentData API

组件提供了全局函数 getCurrentData() 来获取当前拖拽数据，其返回值为一个包含两个属性的对象：

{
  data: any;        // 原始数据
  clonedData: any;  // 克隆数据
}

典型使用场景

import { useDraggable, getCurrentData } from 'vue-draggable-plus'

const draggable = useDraggable(el, list, {
  animation: 150,
  onEnd() {
    const { data, clonedData } = getCurrentData()
    console.log('原始数据:', data)
    console.log('克隆数据:', clonedData)
  }
})

TypeScript 支持

为了增强类型安全性，getCurrentData 支持泛型参数，开发者可以明确指定数据类型：

onEnd() {
  const { data } = getCurrentData<{ id: number; name: string }>()
  // data 现在具有明确的类型 { id: number; name: string }
}

异步处理注意事项

由于 getCurrentData 是基于拖拽过程中的临时状态实现的，开发者需要注意其异步使用限制：

推荐做法：在事件回调中立即获取数据并保存引用

onEnd() {
  const currentData = getCurrentData()
  setTimeout(() => {
    console.log(currentData.data)  // 正常工作
  }, 1000)
}

错误做法：在异步回调中尝试获取数据

onEnd() {
  setTimeout(() => {
    const currentData = getCurrentData()  // 可能无法获取正确数据
    console.log(currentData.data)
  }, 1000)
}

设计考量

Vue-Draggable-Plus 选择通过全局函数而非事件参数扩展的方式提供拖拽数据，主要基于以下考虑：

1. API 稳定性：避免因底层 Sortable.js 参数变更导致的接口不兼容
2. 灵活性：允许开发者在多个事件处理函数中访问相同的数据
3. 一致性：保持与 Vue 生态其他工具（如 getCurrentInstance）相似的使用模式

最佳实践建议

1. 对于简单场景，直接在事件处理函数中使用 getCurrentData
2. 对于复杂类型，始终使用泛型参数确保类型安全
3. 需要异步处理数据时，先同步获取数据引用再传递到异步流程
4. 考虑在组件中封装数据获取逻辑，提高代码可维护性

通过合理利用 Vue-Draggable-Plus 提供的数据获取机制，开发者可以构建出既灵活又可靠的拖拽交互体验。

vue-draggable-plus Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-draggable-plus