使用vue.draggable拖拽组件遇到的一些问题

资源

github：vue.draggable

中文文档：vue.draggable中文文档

api参考文档：sortablejs

vue.draggable是基于sortablejs的vue封装，所有有些api官方并不会有过多的解释，可以去sortablejs查看下

拖拽无法触发页面滚动

当拖拽的内容大于页面宽高时，页面滚动就是一个必然的需求，但是vue.draggable默认情况并不能触发滚动。

官方设置里有一个属性：scroll，如果为true时就能触发滚动，但是默认属性就是true；所以这个配置可以说是无效的。

解决方案：cannot set scrollSensitivity

19年的时候就有提出这个问题的issuse了，简单总结下方法：

如果想进行滚动，我们还需要设置：force-fallback属性，force-fallback表示是否忽略HTML5拖拽行为，我们需要设置为true。

<Draggable v-model="form.chapters" :force-fallback="true">
  ...
</Draggable>

事实上设置这个属性就可以了，滚动已经可以使用，但是我们还可以使用一个配合属性来搭配使用：scroll-sensitivity。

scroll-sensitivity表示拖拽到距离浏览器多少边缘距离触发滚动。默认：30

<Draggable v-model="form.chapters" :force-fallback="true" :scroll-sensitivity="100">
  ...
</Draggable>

具体的数值，自行设置即可。

拖拽没有动画

添加动画时间即可。

<Draggable v-model="form.chapters" animation="250">
  ...
</Draggable>

指定触发点

<Draggable v-model="form.chapters" handle=".chapter-item-sort">
  ...
</Draggable>

handle的值是选择器

一个不错的主意

当我们拖拽的内容太大时，拖拽明显不是很合适，我们可以利用class让拖拽的元素在拖拽时宽高变小，拖拽完成后岂不美哉。

效果如下：

但是官方并没有提供类似的接口，所以我们只能自己做了。

<template>
  <div class="chapter-list" :class="{draggable:chaptersDraggable}">
     <Draggable v-model="form.chapters" handle=".chapter-item-sort" animation="250"
      :force-fallback="true" :scroll-sensitivity="100" @start="chaptersDraggable=true"
       @end="chaptersDraggable=false" fallbackClass="mirror-item">
      ...省略
    </Draggable>
  </div>
</template>

<script>
export default { 
   data() {
    return {
      chaptersDraggable: false, //章节是否开始拖拽
    };
  },
}
</script>

<style lang="scss" scoped>
.chapter-list {
  //拖拽时的样式
  &.draggable .chapter-item {
    .chapter-item-body {
      height: 0;
      overflow: hidden;
    }
  }
  .mirror-item {
    height: 58px !important;
  }
}
</style>

拖拽开始通过事件改变chaptersDraggable，然后给父元素添加一个classdraggable，利用这个class给所有的拖拽子元素设置高度，具体样式就自己去实现，这里只是演示代码。

需要注意的时候，拖拽时会产生一个幽灵节点，跟随鼠标移动，它就是一个克隆的节点，虽然样式会继承，但是他可能样式上会有一些冲突，所以通过fallbackClass给他添加一个class，然后强制设置一下高度。

如果你有更好的做法也可以推荐一下，这个幽灵节点。

当拖拽结束后，改变chaptersDraggable，然后父元素自动移除classdraggable，一切恢复原样。

这个就是一个好主意。