vue.draggable的基本使用可以通过vue.draggable 进行拖动排序，拖动的数据和data里的数据为双向

前言

1.可以通过vue.draggable 进行拖动排序 。
2.Draggable为基于Sortable.js的vue组件,用以实现拖拽功能。
3.拖动的数据和data里的数据为双向绑定,在界面变的时候data中的数据也在跟着变化。

NPM或yarn安装方式

yarn add vuedraggable
npm i -S vuedraggable

常用属性说明

属性说明           如果下面的属性说明未能完全看明白，请访问非vue版 sortable.js里面有更详细的例子。

属性名称	    说明
*group	            group= "name"，相同的组之间可以相互拖拽。 group="site"  
*sort	            sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序,默认为true       
*delay	            delay= "0", 鼠标按下后多久可以拖拽,此属性可以一定程度上防止误触操作。 delay="1000" 
*disabled	   :disabled= "false",是否启用拖拽组件,默认启用
*animation	    拖动时的动画效果,数字类型。如设置animation=1000表示1秒过渡动画效果,这样拖动时过渡位置就不会显的太生硬。
*handle	            handle=".mover" 只有当鼠标移动到class为mover类的元素上才能拖动,点击其他区域则无法拖动             
*filter	            filter=".unmover" 设置了unmover样式的元素不允许拖动 
*draggable	    draggable=".item" 类名为item的元素是可以被拖动的
*ghostClass	    ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true。ghostClass="ghost" 
*chosenClass	    chosenClass="chosen"被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true,可以通过自定义样式来方便的区分出那个元素被选中。chosenClass="chosen"
*dragClass	    dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true。dragClass="drag"
*forceFallback	    默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，
*clone              拷贝实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。
                   :options="{group:{name: 'itxst',pull:'clone'},sort: true}" 
*scroll	            默认true,有滚动区域是否允许拖拽,属性容器有滚动条时是否允许滚动及当父容器元素有滚动条时是否允许拖动。:scroll="true" 
                    你要自定义ghostClass、chosenClass、dragClass样式时，建议forceFallback设置为true
dataIdAttr	    dataIdAttr: 'data-id'
fallbackClass	    默认false，克隆的DOM元素的类名
allbackOnBody	    默认false，克隆的元素添加到文档的body中
scrollFn	    滚动回调函数
scrollSensitivity   距离滚动区域多远时，滚动滚动条
scrollSpeed	    滚动速度
touchStartThreshold 鼠标移动多少px才能拖动元素
fallbackTolerance   拖拽之前应该移动的px

常用事件说明

start	           开始拖动时触发的事件。 @start="start"
add	           从一个数组拖拽到另外一个数组时触发的事件。从A组拖动到B组完成的事件,当前网页只有一页时不会触发该事件。
                    @add="add1"
remove	           移除事件
update	           拖拽变换位置时触发的事件
end	           拖拽完成时的事件
choose	           鼠标点击选中要拖拽元素时的事件
unchoose	   选中后松开鼠标的事件
sort	           位置变化时的事件
clone	           从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素
move               自定义控制那些元素可以拖拽或不允许拖拽，实际业务场景往往会比较复杂，往往在拖拽过程中才能知道那些元素允许停靠，点击时才知道那些元素是否允许拖拽。
                   :move="onMove"
                   
//move回调方法
onMove(e,originalEvent){ 
         //不允许停靠
         if (e.relatedContext.element.id == 1) return false;
         //不允许拖拽
         if (e.draggedContext.element.id == 4) return false;
         return true;
      },
      
//e对象结构
draggedContext: 被拖拽的元素
      index: 被拖拽的元素的序号
      element: 被拖拽的元素对应的对象
      futureIndex: 预期位置、目标位置
relatedContext: 将停靠的对象
      index: 目标停靠对象的序号
      element: 目标的元素对应的对象
      list:  目标数组
      component: 将停靠的vue组件对象

vue.draggable的基本使用

前言

相关文档

NPM或yarn安装方式

常用属性说明

常用事件说明