Vue.Draggable 拖拽

1.安装插件

npm install vuedraggable --save

2.页面引入

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

3.页面使用

<template>
    <!-- 拖拽插件 -->
    <draggable class="dragList" element="ul" :options="dragOptions" v-model="list">
        <!-- 过度效果 -->
        <transition-group>
            <div v-for="item in list" :key="item" class="item">
                <p>{{item}}</p>
            </div>
        </transition-group>
    </draggable>
</template>
<script>
    export default {
        components: {
            draggable : draggable
        },
        data(){
            list:[1,2,3,4,5,6,7,8,9],
            dragOptions:{
                animation:300,
                filter:".delDragListBtn"
            }
        }
    }
</script>

4.属性

element = "ul"    //<draggable>标签在渲染后展现出来的标签类型

5.配置项

group: string or array    //分组用的，同一组的不同list可以相互拖动 name相同的组可以互相拖动
sort: boolean    //定义是否可以拖拽
delay:number    //定义鼠标选中列表单元可以开始拖动的延迟时间
touchStartThreshold:number    // px,在取消延迟拖动事件之前，点应该移动多少像素?
disabled: boolean     //定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能
store:null    // @see Store
animation: umber    // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
handle: selector    //格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
filter: selector    //格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔
preventOnFilter: true    //当拖动filter时是否触发event.preventDefault()默认触发
draggable: selector    //格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放
ghostClass: selector    //格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式
chosenClass: selector     //格式为简单css选择器的字符串，目标被选中时添加
dragClass:selector    //格式为简单css选择器的字符串，目标拖动过程中添加
forceFallback: boolean    //如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等
fallbackClass： string     //当forceFallback设置为true时，拖放过程中鼠标附着单元的样式
dataIdAttr： data-id
scroll：boolean    //当排序的容器是个可滚动的区域，拖放可以引起区域滚动
scrollFn：function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … }    //用于自定义滚动条的适配
scrollSensitivity: number    //就是鼠标靠近边缘多远开始滚动默认30
scrollSpeed: number    //滚动速度



setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
    dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
},

// Element is chosen
onChoose: function (/**Event*/evt) {
    evt.oldIndex;  // element index within parent
},

// Element dragging started
onStart: function (/**Event*/evt) {
    evt.oldIndex;  // element index within parent
},

// Element dragging ended
onEnd: function (/**Event*/evt) {
    evt.oldIndex;  // element's old index within parent
    evt.newIndex;  // element's new index within parent
},

// Element is dropped into the list from another list
onAdd: function (/**Event*/evt) {
    var itemEl = evt.item;  // dragged HTMLElement
    evt.from;  // previous list
    // + indexes from onEnd
},

// Changed sorting within list
onUpdate: function (/**Event*/evt) {
    var itemEl = evt.item;  // dragged HTMLElement
    // + indexes from onEnd
},

// Called by any change to the list (add / update / remove)
onSort: function (/**Event*/evt) {
    // same properties as onUpdate
},

// Element is removed from the list into another list
onRemove: function (/**Event*/evt) {
    // same properties as onUpdate
},

// Attempt to drag a filtered element
onFilter: function (/**Event*/evt) {
    var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
},

// Event when you move an item in the list or between lists
onMove: function (/**Event*/evt, /**Event*/originalEvent) {
    // Example: http://jsbin.com/tuyafe/1/edit?js,output
    evt.dragged; // dragged HTMLElement
    evt.draggedRect; // TextRectangle {left, top, right и bottom}
    evt.related; // HTMLElement on which have guided
    evt.relatedRect; // TextRectangle
    originalEvent.clientY; // mouse position
    // return false; — for cancel
},
    
// Called when creating a clone of element
onClone: function (/**Event*/evt) {
    var origEl = evt.item;
    var cloneEl = evt.clone;
}

5.事件

start, add, remove, update, end, choose, unchoose, sort, filter, clone
前面的这些被 Vue Draggable 隐藏的事件（一共10个），只要绑定在 Vue 的 DOM 上就可以被组件调用：
所有10个事件都有一个 event 参数，这个参数一些相关的对象：
to:  HTMLElement — list, in which moved element.
from:  HTMLElement — previous list
item:  HTMLElement — dragged element
clone:  HTMLElement
oldIndex:  Number|undefined — old index within parent
newIndex:  Number|undefined — new index within parent

参数带有如下属性：
add: 包含被添加到列表的元素
newIndex: 添加后的新索引
element: 被添加的元素
removed: 从列表中移除的元素
oldIndex: 移除前的索引
element: 被移除的元素
moved：内部移动的
newIndex: 改变后的索引
oldIndex: 改变前的索引
element: 被移动的元素