Auto Scroll

makeAutoScroll automatically scrolls a container when the drag overlay center approaches its edges.

Demo

Drag an item near the top or bottom edge of the list to trigger auto-scroll.

Drag items near the top or bottom edge to trigger auto-scroll.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

Source

• Example.vue
• ScrollList.vue
• SortItem.vue

What's used

• ScrollList — makeDroppable + makeAutoScroll(ref, { threshold: 60, speed: 1.5 }) on the same element. The container border highlights when isScrolling is true.
• SortItem — makeDraggable with [index, items] payload; shows placement indicators on isDragOver.
• suggestSort('vertical') — reorders items on drop.