Scrolling Behavior During Dragging with Wheel Event

[benedetto-kotzaneck]

I am currently working on a feature where I need to implement a scrolling behavior when a list item is being dragged. I am using the vuedraggable package for the draggable list.

The expected behavior is that when a list item is being dragged and the user scrolls the mouse wheel, the list should scroll accordingly. This is to allow the user to drag items to positions that are currently out of view due to the list's overflow.

I tried to implement this by attaching a wheel event handler to the window object. However, this does not seem to catch the wheel event when a list item is being dragged. Here is a simplified version of my current implementation:

onMounted(() => {
window.addEventListener('wheel', handleScroll);
})

onBeforeUnmount(() => {
window.removeEventListener('wheel', handleScroll);
});

function handleScroll(_event: Event) {
const event = _event as WheelEvent;
if (!isDragging.value) return;
if (draggableContainer.value) {
event.preventDefault();
draggableContainer.value.scrollTop += event.deltaY;
draggableContainer.value.scrollLeft += event.deltaX;
}
}