vue 实现自由拖拽功能组件 vuedraggable 使用

1.安装

npm 或 yarn

yarn add vuedraggable
npm i -S vuedraggable

---

2.引用

js

  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

---

3.使用

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

4.结果

列表可以拖动

5. 属性
除了这种最简单的用法，还有其他高级实现可用，具体属性见官网

详见官网：github：https://github.com/SortableJS/Vue.Draggable
掘金网友总结： https://juejin.cn/post/6844904150350692366
官网示例：https://sortablejs.github.io/Vue.Draggable/#/simple