vue-draggable学习和使用

1.在项目中遇见一些需要排序的数据 ， 我们可以通过vue.draggable 进行拖动排序 。
2.Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

安装

npm i -S vuedraggable  || yarn add vuedraggable

使用

页面引入

import draggable from "vuedraggable"

组件定义

components: {
	draggable 
},

页面使用

   <draggable v-model="list" animation="500"  force-fallback="true"  handle=".move"  @start="onStart" @end="onEnd" :move="checkMove"> 
       <tr v-for="item in list" :key="item.id"  >
          <td style="width:50px" class="move">{{item.id}}</td>
          <td style="width:250px">{{item.name}}</td>
       </tr>
   </draggable> 

事件

  checkMove(evt) {
        console.log(evt)
        return true;
    },
  //开始拖拽事件
  onStart(){
     this.drag=true;
  },
 //拖拽结束事件
  onEnd() {
   this.drag=false;
  }

属性说明

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽
sort	:sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
delay	:delay= “0”, 鼠标按下后多久可以拖拽
touchStartThreshold	鼠标移动多少px才能拖动元素
disabled	:disabled= “true”,是否启用拖拽组件
animation	拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle	:handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动
filter	:filter=".unmover" 设置了unmover样式的元素不允许拖动
draggable	:draggable=".item" 那些元素是可以被拖动的
ghostClass	:ghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosenClass	:ghostClass=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dragClass	:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
forceFallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true

附上文档地址：http://www.itxst.com/vue-draggable/tutorial.html