supraniti / vue-dnd-zone Goto Github PK

View Code? Open in Web Editor NEW

148.0 8.0 13.0 5.94 MB

vue.js plugin for drag and drop functionality

Home Page: https://supraniti.github.io/vue-dnd-zone/

License: MIT License

JavaScript 97.09% CSS 2.91%

drag-and-drop draggable sortable vuejs

vue-dnd-zone's Introduction

vue-dnd-zone

Drag And Drop functionality for Vue.js - written in Vue.js

vue-dnd-zone is a vue.js plugin for drag and drop functionality. It is not a wrapper for an external js library, but a set of vue components managing the drag and drop event and data model state

Examples, Demo, API:

https://supraniti.github.io/vue-dnd-zone/

Features

Smooth transitions
Auto scroll while dragging
Supports nested structures
Lightweight (~4kb gzipped)
Supports touch events

Installation

npm install vue-dnd-zone

//main.js
import VueDndZone from 'vue-dnd-zone'
import 'vue-dnd-zone/vue-dnd-zone.css'

Usage

  <dnd-zone>
    <dnd-container>
      <dnd-item>
        <!-- item markup goes here -->
      </dnd-item>
    </dnd-container>
  </dnd-zone>

Development

vue-dnd-zone is currently in a POC (proof of concept) state, Further development can and will be done, but it might take a while :-) If you want to support its progress, star the repository on github

License

MIT

vue-dnd-zone's People

Contributors

Stargazers

Watchers

Forkers

trendingtechnology massimiliano76 krislunde rushikanalamwar beforeoafterm clayandcarbon cpetrula tsboh serhiika didavid61202 vueleague muphet antoine340

vue-dnd-zone's Issues

Not active on first display

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

Version

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

Vue3

Could you make this project for VUE 3?

dnd-zone with Vuetify v-data-table weird behaviour

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?

20210908_dnd-vuetify.mov

Thanks again for your work!

How to disable drag and drop?

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?

Usage in Nuxt app

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

Whats the setup for auto scrolling within an compnent?

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.