Vue.Draggable 的一次无效坑经验谈

今天有一个需求，需要给原来的列表加自定义拖拽排序，之前做过一个原生的 demo，还发了一篇：HTML5 Drag & Drop 入门。

不过我们也没必要重复造轮子，在 Vue 下面有个 Vue.Draggable 可供我们直接使用。

理论上 Draggable 组件应该要挂在最近的要拖拽的直接父节点上，但是如果需要用 transition-group，那么 transition-group 内应含需要拖拽的节点：

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

但是我发现无论我怎么修改，draggable 都不生效，最初我以为是和我在 list 中绑定的一些事件有冲突，注释掉事件监听之后发现还没有生效，我就开始怀疑是不是有什么全局上的设置，然而并没有。

之后我把同样的代码移植出去单独运行，发现可以拖拽，终于还是怀疑到了样式上：

Drag operation with empty list:

To be able to drag items on an empty draggable component, set a min-height more than 0 on the draggable component or the transition-group if any and ensure the transition group has display: block; otherwise height won't work.

最后说明了 transition-group 内的元素 display 必须是 block。

之后发现改成 block 依旧会遇到无法拖拽的情况，再发现因为我绑定了删除，增加了一些 remove 时的效果（包括了 height: 0），在 height: 0 的情况下就没办法抓住元素，所以就在肉眼上表现为无法移动了。

在拖拽选中状态，默认会添加一个 class：.sortable-drag，利用 CSS 的 :not() 选择器可以排除在 .sortable-drag 的情况。

剩下的看 README.md 即可，这一块之前一直没考虑到，是觉得 CSS 的显示和 JavaScript 的操作逻辑似乎没多大关系，实际上还是有的。