vuedraggable 手册

vuedraggable 是一个基于Vue框架的拖拽组件。

目前被广泛用于活动布局

import draggable from 'vuedraggable';

属性：

draggable <example> draggable=".item" 里的.item 指的是可以drag的class选择器

v-model <example> v-model="myArray" 传入drag里组件或ele绑定的数据

tag <example> tag="ul" 绑定<draggable>标签为新的标签 该实例为<ul></ul>

:list <example> :list="listArr" 和 v-model原理类似 将数据传入组件 listArr可以在drag里可渲染

handle <example> handle=".handleclass"  选择可拖拽的ele  在.handleclass 这个选择器下的ele可以拖拽

v-bind 绑定一个属性是可以的 可以绑定一个 dragOptions这个dragOptions是个computed 可以绑定drag的属性 <example> animation: 200, group: "description", disabled: false, ghostClass: "ghost" 或者 通过 :other="other"同样可以绑定属性但是这样绑定方法不可绑定到dragOptions里 让dragOptions生效

animation动画可单独放入 :animation="100"

group 可将多个draggable分组 <example> 当group="a"时 所有组名一样的可以互拖

方法

@start="method" 当开始移动时触发method并返回event含开始位置信息等等

@end="method" 当结束移动时触发method并返回event含开始和结束位置信息等等

插槽

slot="header" 从顶部插入一个内容

slot="footer" 从底部插入一个内容

 

dragOptions() {

      return {

        animation: 200,

        group: "description",

        disabled: false,

        ghostClass: "ghost"

      };

    },

 

<draggable v-model="myArray" draggable=".item">

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

        {{element.name}}

    </div>

    <button slot="header" @click="addPeople">Add</button>

</draggable>