关于使用vue-slicksort的一些问题总结

今天项目上有一个需求，要求复杂数组可以拖拽排列位置。

找到一个组件：vue-slicksort，总的来说还是比较符合我的初始需求。但是在使用过程中也遇到一些问题。现记录如下。

插件原址：https://www.npmjs.com/package/vue-slicksort?activeTab=readme

一：使用
官网的使用教程，个人觉得比较复杂，我们在vue使用的时候，大多不太像官网介绍的那样去写组件。现介绍我的方法如下：
先上效果图：

一共引入了三个组件：

i) handleDirective:用于实现点击指定icon部分完成拖拽，并非全区拖拽，避免被拖拽的item内部的点击事件被覆盖掉。需要在directives中将其指定到handle事件中，方便在template中被dom绑定使用
ii) SlickList, SlickItem作为slicksort内置组件被引入，需要在components中声明
1-3):vue template中使用

图中化红线部分，从上到下，从左到右依次说明：
i) userDragHandle 表示组件需要使用指定手势来完成拖拽，而非整个slickitem区域作为拖拽可触发热点
ii) helperClass定义slickitem被拖拽起的那一刻所拥有的新的class你可以用它对拖拽的slickitem进行样式渲染
iii) slicklist的值，即你所需要渲染的复杂数组
iiii) input事件能将改变顺序后的数组回传到elementChange事件中，你可以自己对它进行相应处理
iiiii) slickitem 的index属性，很重要，而且必须为它自己的index值，千万不要手贱去修改它/不要问我为什么知道T~T
iiiiii) 拖拽触发dom 此处的v-hand对应js中引入的directive方法

特别说明：1：被拖拽的slickitem其实已经脱离你原有页面dom层级结构，它会单独出现在html的body标签的最后面，所以在写被拖拽起来的item样式是需要注意，它不继承你之前写在你dom继承体里的样式。2：如果拖拽起来的item消失了，可能是你的dom元素层级把拖拽起的item覆盖掉了，用z-index试试

感觉做了好久，写下来半个小时都不到哈哈