Vue.Draggable 实现组件拖拽
特性
支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操作当需要完全控制时，可以抛出所有变化可以和现有的UI组件兼容安装与引入
1 npm i -S vuedraggable2 import vuedraggable from 'vuedraggable'复制代码
注册组件
components:{draggable} 复制代码
使用方法
<template><div class="box_main"><div class="box_left"><div class="templateTask">请选择任务</div><vuedraggablev-model="showTask":options="{animation:300,group:'people', scroll:true,scrollSpeed:2000,scrollSensitivity:10}"style="height:800px; overflow:scroll; overflow-x:auto; overflow :auto;"><div v-for="(item,key) in showTask" :key="key" :index="key"><component :is="ponent" ref="getComponentData"></component></div></vuedraggable></div><div class="box_right"><div class="templateTask">已有任务</div><vuedraggablev-model="rightTask":options="{animation:300,group:'people',scroll:true,scrollSpeed:2000,scrollSensitivity:10}"style="height:800px; overflow:scroll; overflow-x:auto; overflow :auto;"><div v-for="(item,key) in rightTask" :key="key" :index="key"><component :is="ponent" ref="getComponentData"></component></div></vuedraggable></div></div></template><script>import vuedraggable from 'vuedraggable'export default {name: 'App',data() {return {showTask: [],//左边显示的组件rightTask: [],//右边显示组件,editable: true,isDragging: false,delayedDragging: false}},components: {//调用组件draggable,},methods:{}}</script><style>.div3{display: flex;}#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;display: flex;}.div1{flex: 1;height: 500px;background-color: antiquewhite;}.div2{flex: 1;height: 500px;background-color: beige;}</style>复制代码
注意：
两边的盒子最好设高，不然一边没有高度就拖动不了属性
element
String，默认div
就是标签在渲染后展现出来的标签类型也是包含拖动列表和插槽的外部标签可以用来兼容UI组件
options
Object
group: string or array分组用的，同一组的不同list可以相互拖动sort: boolean 定义是否可以拖拽delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间touchStartThreshold:number (不清楚)disabled: boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能animation: umber 单位:ms 动画时间handle: selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动filter: selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔preventOnFilter: 当拖动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-idscroll：boolean当排序的容器是个可滚动的区域，拖放可以引起区域滚动scrollFn：function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30scrollSpeed: number 滚动速度 ！
