拖拽组件—vuedraggable

1.引入组件

vue2

Example

yarn add vuedraggable

npm i -S vuedraggable

vue3

Example

yarn add vuedraggable@next

npm i -S vuedraggable@next

2.例子

<draggable>
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
    <button slot="footer" @click="addPeople">Add</button></draggable>

插槽（slot）

• header
• footer

常用API

props

• list 数据源（array）

• sort 是否排序（true/false，默认true）

• item-key 元素key值

• handle 可自定义拖拽元素得类名

events

• change 
• clone
• sort
• added
• remove
• move