父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案

栏目: Html · 发布时间: 5年前

内容简介:首先看了官方文档,看的快睡着了。然后看了看 issue,貌似没有人提交类似的 issue,大概这也算不上 bug 吧,大概论坛有解决的方法。搜索引擎也查过,没发现什么有用的文章。期间,找到一个官方给的 demo,修改了css样式:父元素设置了固定高度,并添加后来又认真地看了官方文档,甚至想看看源码实现(太耗费时间放弃)。

首先看了官方文档,看的快睡着了。然后看了看 issue,貌似没有人提交类似的 issue,大概这也算不上 bug 吧,大概论坛有解决的方法。搜索引擎也查过,没发现什么有用的文章。

期间,找到一个官方给的 demo,修改了css样式:父元素设置了固定高度,并添加 overflow:scroll ,并将 item 的高度提高。测试发现:还是出现了我遇到的问题。

后来又认真地看了官方文档,甚至想看看源码实现(太耗费时间放弃)。

最后决定从 vuedraggable 的 move 事件入手,试着解决第一个问题。原本我以为只有新位置刚好在顶部或底部时,才会出现疯狂闪烁的鬼畜现象。搞完后发现,任意两个 item 之间也会鬼畜啊啊啊。太鬼畜了,不过最后转换了一个方向,解决了这个问题。然后第二个问题我也是想用 move 事件解决,直到我发现了 choose 事件的存在。

最终解决方案

  1. 鬼畜闪烁 问题

原本是想通过对 move 事件的 evt 对象获取目标位置、item 的高度,以及父元素的 scrollTop 和 offsetHeight 的计算,在拖拽完成前对父元素的 scrollTop 进行修正,来阻止不停改变最终位置的鬼畜现象。(虽然最后弃用了,不过在解决第二个问题的时候还是用到了这些算法)

然而发现任何两个 item 之间都可能会出现……不好计算呀

最后我选择了 动画效果 ,一下子就解决了,只要 CSS 动画设定了持续时间,就不会出现鬼畜现象了。而且 vuedraggable 也提供了动画的prop:options 的 animation,像下面这样设置就行了。

<draggable 
    v-model="materialList"  
    :options="{
        scroll: true,
        animation: 150
    }"
    >
    ...
</draggable>
复制代码

设置了 animation,你就能看到好看的动画效果了,也没有闪烁现象。完美。

  1. 针对拖拽时 item 的 残缺 问题。

这个就要通过 choose 事件解决了。该事件在用户点击拖拽元素的时候触发,另外说一下,move 事件是在元素被拖拽的时候触发。也就是说,choose 事件是在 move 事件之前触发的,我们可以在这时候检测被拖拽的 item 是否有部分被父元素遮挡,做 scrollTop 的修正。

<draggable 
    ...
    v-model="materialList"
    >
    ...
@choose="choose"
复制代码
choose(evt) {
    // const ITEM_HEIGHT = 153;
    const ITEM_HEIGHT = evt.item.offsetHeight;
    let container = evt.path[1];
    let index = evt.oldIndex;

    if (index * ITEM_HEIGHT < container.scrollTop) {
            container.scrollTo({
            top: index * ITEM_HEIGHT
        });
    }
    else if ((index + 1) * ITEM_HEIGHT > container.scrollTop + container.offsetHeight) {
        container.scrollTo({
            top: (index + 1) * ITEM_HEIGHT - container.offsetHeight
        });
    }
},
复制代码

算法大致思路:获取拖拽元素的 index,然后获取元素的高度。接着是获取容器元素的偏移量 scrollTop 以及它的高度。有了这些已知条件,就能知道拖拽元素是否被遮挡,如果遮挡,修改容器元素的 scrollTop(记得不能用动画效果,要立即修改,因为 move 事件可能在 choose 事件触发后立即被触发,没能移动完的 item 快照将仍然是残缺的),使其刚好使拖拽元素刚好紧贴容器元素的可视区域的边缘。然后拖拽时,item 快照的图片就是完整的了!


以上所述就是小编给大家介绍的《父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Introduction to Linear Optimization

Introduction to Linear Optimization

Dimitris Bertsimas、John N. Tsitsiklis / Athena Scientific / 1997-02-01 / USD 89.00

"The true merit of this book, however, lies in its pedagogical qualities which are so impressive..." "Throughout the book, the authors make serious efforts to give geometric and intuitive explanations......一起来看看 《Introduction to Linear Optimization》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具