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

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐