使用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。
javascript复制代码<Draggable v-model="form.chapters" :force-fallback="true">
...
</Draggable>事实上设置这个属性就可以了，滚动已经可以使用，但是我们还可以使用一个配合属性来搭配使用：scroll-sensitivity。
scroll-sensitivity表示拖拽到距离浏览器多少边缘距离触发滚动。默认：30
javascript复制代码<Draggable v-model="form.chapters" :force-fallback="true" :scroll-sensitivity="100">
...
</Draggable>具体的数值，自行设置即可。
拖拽没有动画
添加动画时间即可。
javascript复制代码<Draggable v-model="form.chapters" animation="250">
...
</Draggable>指定触发点
javascript复制代码<Draggable v-model="form.chapters" handle=".chapter-item-sort">
...
</Draggable>handle的值是选择器
一个不错的主意
当我们拖拽的内容太大时，拖拽明显不是很合适，我们可以利用class让拖拽的元素在拖拽时宽高变小，拖拽完成后岂不美哉。
效果如下：
但是官方并没有提供类似的接口，所以我们只能自己做了。
javascript复制代码<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，一切恢复原样。
这个就是一个好主意。
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 5
溪森堡
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10dahui
Google Chrome Windows 10one-flower
Google Chrome Windows 10lwl
FireFox Windows 10