Body scroll while dragging?

Hi,

Just wanted to ask how the scroll works? I have checked the examples and if I remove overflow: auto from the demo (.demo), it stops working. I wonder if it’s possible to make the whole page (body) to scroll while dragging?

[kutlugsahin]

Hey @ispal It’s implemented in v0.2.3. Basically the lib looks for all the elements (starting from the containers to the root) which has scrollbars and manipulates the scroll values according to the dragging positions. This search goes on until parentElement is undefined. Since window cannot be reached by parentElement it needed a special implementation which is implemented in smooth-dnd v0.5.6. Cheers!

[isaac-souza]

To workaround this use a scrollable div element instead of instead of body.

<template>
    <div class="overflow-y-auto h-screen">
        <span>Studio Ghibli Tier List</span>
        <Container orientation="vertical" @drop="onDrop" :auto-scroll-enabled="true">
            <Draggable v-for="(item, i) in items" :key="item.id">
                <div class="w-24 h-24 bg-blue-400 m-2">
                    {{ i + 1 }} -> {{ item.data }}
                </div>
            </Draggable>
        </Container>
    </div>
</template>

Not sure if anyone is still having that issue, but as answered by @kutlugsahin, the workaround works just fine, at least it worked for me.

It is on the second line <div class="overflow-y-auto h-screen">.

Hope that helps anyone.