共计 987 个字符，预计需要花费 3 分钟才能阅读完成。
明天我的项目上有一个需要，要求简单数组能够拖拽排列地位。
找到一个组件：vue-slicksort，总的来说还是比拟合乎我的初始需要。然而在应用过程中也遇到一些问题。现记录如下。
插件旧址：https://www.npmjs.com/package/vue-slicksort?activeTab=readme
一：应用
官网的应用教程，集体感觉比较复杂，咱们在 vue 应用的时候，大多不太像官网介绍的那样去写组件。现介绍我的办法如下：
先上效果图：
1-1): cnpm i vue-slicksort –save-dev
1-2): 须要应用到的组件中引入：
一共引入了三个组件：
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 试试
感觉做了良久，写下来半个小时都不到哈哈