vuedraggable(vue2.0)组件详解

---恢复内容开始---

github地址

安装

yarn add vuedraggable

npm i -S vuedraggable

使用方式

通常

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

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

使用过渡transition-group

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

使用footer slot

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

<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}