资源

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,一切恢复原样。

这个就是一个好主意。

分类: vue 项目实战 标签: 拖拽vuevue.draggable

评论

全部评论 3

  1. dahui
    dahui
    Google Chrome Windows 10
    刚遇到这个需求,感谢分享!
  2. one-flower
    one-flower
    Google Chrome Windows 10
    非常棒的文章,感谢分享
  3. lwl
    lwl
    FireFox Windows 10
    大神能提供一下源码吗?[微笑]

目录