Vue——vuedraggable拖拽组件使用文档总结

vuedraggable官方文档地址：

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 关于Vue.Draggable详细信息可以查看

特性

支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的UI组件兼容

安装

npm install vuedraggable

引入

import draggable from vuedraggable

基础用法 定义一个json串 list，实现它的拖拽排序。

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

属性 注意：vuedraggable新版本废弃了options属性，建议使用v-bind属性作为配置项

options配置项 事件

插槽 页眉或页脚插槽都不能与 tarnstion-group 一起使用。

Header 使用标题插槽在vuedraggable组件中添加不可拖动的元素。它应该与draggable选项一起使用来标记draggable元素。请注意，无论标题槽在模板中的位置如何，它总是被添加到默认槽之前。

<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>

Footer 使用页脚槽在vuedraggable组件中添加不可拖动的元素。它应该与draggable选项一起使用，以标记draggable元素。请注意，无论页脚槽在模板中的位置如何，它都将始终添加到默认槽之后。

<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>