接到一个新需求 ==> 泳道图,大概长这样：
页面比较简单，主要就是一个卡片拖拽的功能，所以我直接就用了 vuedraggable 这个插件，官网在这里，Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue2过渡动画兼容、支持撤销操作，是一款非常优秀的vue拖拽组件。
配置
一如其他插件，首先安装：
npm i -S vuedraggable
页面引入
import draggable from 'vuedraggable'
使用（举一个完整的例子）
<template>
<div>
<div>{{drag?'拖拽中':'拖拽停止'}}</div>
<!--使用draggable组件-->
<draggable v-model="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
</transition-group>
</draggable>
</div>
</template>
<style scoped>
/*被拖拽对象的样式*/
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/*选中样式*/
.chosen {
border: solid 2px #3089dc !important;
}
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
//注册draggable组件
components: {
draggable,
},
data() {
return {
drag:false,
//定义要被拖拽对象的数组
myArray:[
{people:'cn',id:1,name:'www.itxst.com'},
{people:'cn',id:2,name:'www.baidu.com'},
{people:'cn',id:3,name:'www.taobao.com'},
{people:'us',id:4,name:'www.google.com'}
]
};
},
methods: {
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
},
},
};
</script>
实现的效果：
这是一个最基本的实现组内拖拽排序的功能，vue.draggable作为一款强大的vue拖拽组件，可以满足对元素的拖拽需求，也可以两两列或多列之间相互拖动，只需要设置相同的group即可。
实现泳道
有了上面的例子那来实现可以拖拽的泳道就变的十分简单，可以看到下面的实现效果：
当然这是一个最基础的例子，往往我们在开发中还需使用禁用和拖拽验证，vue-draggable给我们提供了很多属性和方法。
vuedraggable的常用事件和属性
上面都是比较基础的实现，其实vuedraggable有很多事件和属性来支持我们实现更多的需求：
事件：
//evt里面有两个值，一个evt.added 和evt.removed 可以分别知道移动元素的ID和删除元素的ID
change: function (evt) {
console.log(evt)
},
//start ,end ,add,update, sort, remove
start: function (evt) {
console.log(evt)
},
end: function (evt) {
console.log(evt)
evt.item //可以知道拖动的本身
evt.to // 可以知道拖动的目标列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖动前的位置
evt.newIndex // 可以知道拖动后的位置
},
move: function (evt, originalEvent) {
console.log(evt)
console.log(originalEvent) //鼠标位置
}
属性：
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
sort: true, // 内部排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
disabled: false, // 如果设置为真，则禁用sortable。
animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
handle: ".my-handle", // 在列表项中拖动句柄选择器。
filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: ".item", // 指定元素中的哪些项应该是可拖动的。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
dataIdAttr: 'data-id',
forceFallback: false, // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
fallbackClass: "sortable-fallback", // 使用forceFallback时克隆的DOM元素的类名。
fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
遇到的问题
拖拽区域
目前也是在vue-draggable官网上也是存在的问题，通过demo我们会发现，当一组数据全部被拖拽到另外一组后就没有办法再将数据推动回当前空的泳道，这是因为可拖动区域没有高度导致的
解决办法： 直接在拖动组件上加一个 style="min-height: 100%" ,当然这种内嵌样式其实也不太推荐，大概就是因为我太懒吧，就这样写了。
<draggable
:disabled="disabled"
:sort='false'
:filter="'.unmover'"
v-model="interStages.dataList"
group="site"
style="min-height: 100%"
animation="300"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
v-loading="loading"
@start="start($event)"
@add="onAdd($event)"
@change="onChange($event)"
@end="moveEnd($event)">
不可拖拽的元素
在泳道空数据的情况下我需要显示 暂无数据 空状态字样，后来在项目预演过程中测试过来跟我讲我的暂无数据也可以拖动到其他分组，我自己试了一下也确实可以，因为我的空状态确实也在可以拖拽的区域中，通过查看官网发现只需要给我不允许拖拽的元素加上指定类名，再使用vue-draggable的filter属性过滤掉元素即可。
在dom上给不可以拖拽的元素加上类名 unmover
<div class="no-data unmover" v-if="!interStages.dataList.length)">
<div class="no-data-text"> {{ 暂无数据 }} </div>
</div>
在 vue-draggable 上加属性 filter
<draggable
:disabled="disabled"
:sort='false'
:filter="'.unmover'"
v-model="interStages.dataList"
group="site"
style="min-height: 100%"
animation="300"
dragClass="dragClass"
ghostClass="ghostClass"
chosenClass="chosenClass"
v-loading="loading"
@start="start($event)"
@add="onAdd($event)"
@change="onChange($event)"
@end="moveEnd($event)">
不可拖拽的泳道
上面提到了不可以拖动的元素可以通过添加指定的类名做处理，如果是不能拖动的整个泳道呢？vue-draggable 提供了 disabled 属性，我对 disabled 属性进行了监听，就可以实现指定的泳道不能拖拽。
computed: {
disabled () { // 指定阶段禁用拖拽
return this.interStages.stageType === -1 && this.isDisabled
}
}
事件处理
回到最开始的泳道界面，我将整个泳道界面分别封装成三个组件，最外层便是由一个个泳道组件组成的泳道页面，这个是第一层组件，第二层组件便是泳道，由第三层卡片组件组成
拖拽事件我泳道的有：
@start="start($event)"
@add="onAdd($event)"
@change="onChange($event)"
@end="moveEnd($event)"
事件绑定在组件2，但是需要抛出道组件1上处理，因为拖出的分组和拖进的分组其实是两个组件，如果需要触发接口变更数据，就需要将事件向上抛出。
数据变更
起初我是通过官网demo里 :arr="interStages.dataList" 这种方式绑定的数据，然后通过几次实践我采用了 v-model 的方式绑定数据，区别在于，v-model 绑定数据，数据会变更，这样更有利于我后面做数据回退，感兴趣的同学可以在控制台输出数据的变化。
数据的 newIndex 和 oldIndex 和数据回退
这是我在数据回退中遇到的一个问题，也是至今没有找到原因的一个问题，通过多次数据回退我发现
在 vue-draggable 中有时第一条数据的 index 是0， 有时候是1，正如图中我将卡片从1的位置拖动到2，在触发 start 事件时 oldIndex 是0但是到新的泳道 newIndex 是1,当然有时候也会是 oldIndex 是1而 newIndex 是0,实践了多次都没有找到规律，能总结出来的就是他有时候第一条数据的 index 是1有时候会是0，研究了插件的源代码也没有弄明白。
由于这两个参数的不确定因素导致我在做数据回退的时候不能使用这两个参数回退到指定位置，然后我就用了最笨的方法，用数据ID去数组里找到这条数据手动删除它，然后回退会有一个数据的偏差我决定说服产品会有这种问题
// 不符合跳转条件的数据回退
fallbackData () {
const indexNew = this.stageCountList.findIndex(item => item.id === this.params.toStageId) // 数据跳往的的泳道
const indexDataNew = this.stageCountList[indexNew].dataList.findIndex(item => item.id === this.params.dataId) // 数据的index
this.stageCountList[indexNew].dataList.splice(indexDataNew, 1) // 新的泳道中移除数据
const indexOld = this.stageCountList.findIndex(item => item.id === this.params.fromStageId) // 数据跳出的泳道
this.stageCountList[indexOld].dataList.splice(this.backData.oldIndex, 0, this.moveItem) // 原泳道中插入数据
},
希望大佬解惑。。。
