Whats the setup for auto scrolling within an compnent?

[1Luc1]

I'm having the following setup:

<template>
  <v-container style=" overflow-y: scroll; height: 90vh">
    <dnd-zone :transition-duration="0.3" @move="move" :native-scroll="false">
      <dnd-container :dnd-model="selectedFields" dnd-id="grid-example" class="row">
        <dnd-item v-for="field in selectedFields" :key="field._id" :dnd-id="field._id" :dnd-model="field">
          <v-col cols="4">
            <v-card>
              <v-card-text>{{field.label.de}}</v-card-text>
            </v-card>
          </v-col>
        </dnd-item>
      </dnd-container>
    </dnd-zone>
  </v-container>
</template>

selectedFields has a lot of elements. Drag&Drop elements from top to bottom doesn't work. After some tests, it seems it only works, if overflow / scrollbar only on the html tag. So how to setup drag and drop within an e.g. container with fix height.

[supraniti]

Set native-scroll prop to false

[1Luc1]

thanks for your reply; as you can see within the provided code, the native-scroll prop is already set to false. changing it to true also doesn't work. I still think that's manly a problem about how to set up the surrounding containers right?!?!

[supraniti]

OK... :-) i got mixed up with another D&D library i developed which has the ability to scroll whitin an inner container... In vue-dnd-zone this is not possible, native scroll applies to scrolling the body element only. not any container.

[1Luc1]

ok, thanks. so how should the vue-dnd-zone be use? Should it directly be below the body tag? Can't find a full example.

[supraniti]

vue-dnd-zone can be set anywhere in the document. it doesn't have the ability to trigger inner container scrolling - so you should avoid your content height/width overflows the container dimensions. it is working fine however when the scrolled container is the body. you can try running https://supraniti.github.io/vue-dnd-zone/ (first page is also a draggable example) in a small window and see scrolling in action

[1Luc1]

now i know what you are saying. I'm trying to setup this behavior and may report back on this. Anyway, it would be cool if you could provide an example code how to setup/define your examples...