前言

vuedraggable 是一个基于 Sortable.js 库的 Vue.js 拖拽功能组件。

资料

npm 地址 下载量还是蛮高的

github 地址 star 数还是蛮多的

官网在线示例

Sortable.js 库 github 地址

简单的安装与使用

  1. 安装
  1. yarn add vuedraggable
  2. # or
  3. npm i -S vuedraggable
  1. 使用（源码出处 custom-clone）
  1. <template>
  2.   <div class="row">
  3.     <div class="col-3">
  4.       <h3>Draggable 1</h3>
  5.       <draggable
  6.         class="dragArea list-group"
  7.         :list="list1"
  8.         :group="{ name: 'people', pull: 'clone', put: false }"
  9.         :clone="cloneDog"
  10.         @change="log"
  11.       >
  12.         <div class="list-group-item" v-for="element in list1" :key="element.id">
  13.           {{ element.name }}
  14.         </div>
  15.       </draggable>
  16.     </div>
  18.     <div class="col-3">
  19.       <h3>Draggable 2</h3>
  20.       <draggable
  21.         class="dragArea list-group"
  22.         :list="list2"
  23.         group="people"
  24.         @change="log"
  25.       >
  26.         <div class="list-group-item" v-for="element in list2" :key="element.id">
  27.           {{ element.name }}
  28.         </div>
  29.       </draggable>
  30.     </div>
  32.     <rawDisplayer class="col-3" :value="list1" title="List 1" />
  34.     <rawDisplayer class="col-3" :value="list2" title="List 2" />
  35.   </div>
  36. </template>
  38. <script>
  39. import draggable from "@/vuedraggable";
  40. let idGlobal = 8;
  41. export default {
  42.   name: "custom-clone",
  43.   display: "Custom Clone",
  44.   order: 3,
  45.   components: {
  46.     draggable
  47.   },
  48.   data() {
  49.     return {
  50.       list1: [
  51.         { name: "dog 1", id: 1 },
  52.         { name: "dog 2", id: 2 },
  53.         { name: "dog 3", id: 3 },
  54.         { name: "dog 4", id: 4 }
  55.       ],
  56.       list2: [
  57.         { name: "cat 5", id: 5 },
  58.         { name: "cat 6", id: 6 },
  59.         { name: "cat 7", id: 7 }
  60.       ]
  61.     };
  62.   },
  63.   methods: {
  64.     log: function(evt) {
  65.       window.console.log(evt);
  66.     },
  67.     cloneDog({ id }) {
  68.       return {
  69.         id: idGlobal++,
  70.         name: `cat ${id}`
  71.       };
  72.     }
  73.   }
  74. };
  75. </script>
  76. <style scoped></style>

项目使用中具体需要注意的细节

  1. 当使用两个拖拽组件，需要向目标组件拖拽时无效。

当使用两个拖拽组件，需要向目标组件拖拽时，需要注意：两个字段值，它们的值必须得是相同的。

这样的话，两个组件的拖拽功能才能生效，具体如下：

  • 拖拽组件

拖拽组件

  • 目标组件

目标组件