Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hejianxian/vddl
🦄 Vue components for modifying lists with the HTML5 drag & drop API.
https://github.com/hejianxian/vddl
dnd drag-and-drop vue vue-components vue-dnd
Last synced: about 1 month ago
JSON representation
🦄 Vue components for modifying lists with the HTML5 drag & drop API.
- Host: GitHub
- URL: https://github.com/hejianxian/vddl
- Owner: hejianxian
- License: mit
- Created: 2017-08-01T02:06:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-21T11:16:34.000Z (over 6 years ago)
- Last Synced: 2024-04-24T10:18:12.835Z (8 months ago)
- Topics: dnd, drag-and-drop, vue, vue-components, vue-dnd
- Language: Vue
- Homepage: http://hejx.space/vddl
- Size: 336 KB
- Stars: 392
- Watchers: 10
- Forks: 75
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - vddl
README
Vue components for modifying lists with the HTML5 drag & drop API.
## 💥Warning💥
* 1. Don't set `index` to the `:key`, it will cause dragging confusion.
```html
{{item.label}}
```
* 2. "[Vue warn]: Duplicate keys detected: 'A-1'. This may cause an update error. "
Why is this wrong? Because in Vue.js v2.5.0 version, The `nextTick`'s implementation has changed, specific can see [here](https://github.com/vuejs/vue/releases/tag/v2.5.0). The reason for throwing this error is that when the element is dropped onto the list, a duplicate object is inserted into the array. Now I think this can be done for you. Add a `drop` event to the `vddl-list` and add a `moved` event to the `vddl-draggable`. Then you need to splice the array manually. See the [demo source code](https://github.com/hejianxian/vddl/blob/master/example/src/views/simple.vue#L131-L144)
## Links
- [Documentation](http://hejx.space/vddl)
- [Online Demo](http://hejx.space/vddl-demo)
- [Vue drag&drop lists](https://github.com/hejianxian/vue-drag-and-drop-list)
## Features
- Supports VueJs versions 1.0 and 2.0
- Supports all modern browsers and Internet Explorer 9+
- Supports nested lists for building trees and other fancy structures
**Touch devices are not supported**, because they do not implement the HTML5 drag & drop standard. However, you can use a [shim](https://github.com/timruffles/ios-html5-drag-drop-shim) to make it work on touch devices as well.
## Installation
````bash
npm install --save vddl
# or
yarn add vddl
````
## Usage
```js
import Vue from 'vue';
import Vddl from 'vddl';
Vue.use(Vddl);
```
## Development
````bash
# dev
npm install
npm run watch
# build
npm run build
# run example
cd example && npm install
npm run dev
````
## License
MIT
[](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fhejianxian%2Fvddl?ref=badge_large)