undefinedfix
Sign in

The Vue draggable plug-in list does not scroll automatically

zcmaj edited in Sat, 24 Sep 2022

In the process of using Vue draggable, when you drag items to sort, you can scroll to the beginning and end of the current list. The list cannot scroll automatically, and you can only arrange items in the current visual area. Then you can see that the plug-in has options to set (scroll is true by default)

clipboard.png

There is no effect after setting

clipboard.png

Note: parent sort_ List fixed height, set overflow:scroll ;list_ Wrapper is the actual list height

How to achieve intelligent scrolling list??

1 Replies
SunZYTech
commented on Sat, 24 Sep 2022

https://github.com/SortableJS... According to this issue, this setting is OK. The core is:

:scroll-sensitivity="150"
:force-fallback="true"
<draggable
    class="pictureListBox"
    :list="pictureList"
    :scroll-sensitivity="150"
    :force-fallback="true"
    :options="{
        animation: 200,
        ghostClass: 'ghost',
        handle: '.el-icon-rank'
    }"
    @start="drag = true"
    @end="drag = false"
>