supraniti / vue-dnd-zone Goto Github PK

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.

Could you make this project for VUE 3?

Hi,

After my first message about the use with Nuxt, I would like to thank you again for your work. I've been playing with it a bit and it's pretty smooth.

But I'm facing an issue that I don't see on your demo project. When I'm loading the app for the first time, the DND on the index doesn't work. I need to visit another page then come back to be able to drag n' drop.
If I have the dnd-zone on another page, then when I go to it, it works just fine. But (as for the index), if I reload the page, I've got the same bug.

Any idea, advice or help will be appreciated :)
BR

Great component. Have you got a Vue 3 version of this?

Hey, thank you for the package. I wonder if you can provide a simple guide how to import this package in a Nuxt application.

I decentralize users, some have drag and drop rights, some do not. So is there an option that I can disable/enable the drag and drop?

Hi,

I would like to have a v-data-table as a draggable item. It's working almost OK, I have some issues with the click for page navigation. Depending on how or where exactly you click, dnd-zone react on the click preventing or not the page navigation to happened.

Here a short video to show what I'm talking about. Any idea on how to avoid this behaviour?

Thanks again for your work!