Awe-dnd：Vue中的拖放插件完全指南

富涌嵘

于 2024-10-18 12:35:08 发布

阅读量1k

点赞数 6

本文链接：https://blog.youkuaiyun.com/gitblog_01295/article/details/143048520

版权

Awe-dnd：Vue中的拖放插件完全指南

vue-dragging A sortable list directive with Vue 项目地址: https://gitcode.com/gh_mirrors/vu/vue-dragging

Awe-dnd 是一个专为 Vue.js 设计的拖放插件，它完美地融入了 Vue 的数据驱动模型，且同时兼容 Vue 1.0 和 2.0。无论是桌面端还是移动端，Awe-dnd 都能够提供流畅的元素拖拽体验，支持组合拖拽（multi comb drag）以及自定义分组，增强了应用交互的灵活性。

安装指南

要将 Awe-dnd 添加到您的Vue项目中，请遵循以下步骤：

npm install awe-dnd --save

这条命令会将 Awe-dnd 作为依赖项添加到您的项目，并保存在 package.json 文件中。

项目的使用说明

一旦安装完成，您需要在项目的入口文件（通常是 main.js）中引入并使用它：

import VueDND from 'awe-dnd'
Vue.use(VueDND)

随后，在您的 Vue 组件中，您可以利用指令 v-dragging 实现拖放功能。例如：

<!-- 在Vue组件的模板部分 -->
<div class="color-list">
  <div
    class="color-item"
    v-for="color in colors" 
    v-dragging="{ item: color, list: colors, group: 'color' }"
    :key="color.text"
  >{{color.text}}</div>
</div>

记得在 data 中定义好 colors 数组来存储您的可拖动元素。

对于需要多选拖拽的情况，您可以在 mounted 生命周期钩子中设置每个对象的 isComb 属性。

项目API使用文档

`v-dragging` 指令参数

item: 对象，当前被拖拽的数据。
list: 数组，包含所有可拖放项目的数据源。
group: 字符串，定义拖拽分组，确保仅相同分组内的元素可以互相拖放。
comb: （可选）字符串，用于启用多选拖拽的标识。

示例

Vue 2.0

<div class="color-list">
  <!-- 使用v-dragging指令 -->
  <div v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }" :key="color.text">{{color.text}}</div>
</div>

Vue 1.0 注意事项

在 Vue 1.0 版本中，需要使用 track-by 替代 :key。

<!-- Vue 1.0 示例 -->
<div class="color-list">
  <div v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }" track-by="text">{{color.text}}</div>
</div>

事件监听

您可以监听拖放过程中的事件，如 dragged 和 dragend，以便执行额外的操作：

export default {
  mounted () {
    this.$dragging.$on('dragged', ({ value }) => {
      console.log('拖动的元素:', value.item);
      console.log('所属列表:', value.list);
      console.log('附加数据:', value.otherData); // 如果有设定
    });
    this.$dragging.$on('dragend', () => {
      // 拖拽结束时执行的操作
    });
  }
}