Need help with vddl?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hejianxian
400 Stars 69 Forks MIT License 65 Commits 34 Opened issues

Description

🦄 Vue components for modifying lists with the HTML5 drag & drop API.

Services available

!
?

Need anything else?

Contributors list

# 27,919
Vue.js
HTML
CSS
vue-com...
55 commits
# 67,080
Vue.js
Go
Node.js
golang
2 commits
# 333,891
PHP
CSS
dnd
uploade...
2 commits
# 73,268
Vue.js
CSS
HTML
design-...
2 commits


vddl

Vue components for modifying lists with the HTML5 drag & drop API.

Travis Status npm

💥Warning💥

  • 1. Don't set
    index
    to the
    :key
    , it will cause dragging confusion.
    
      {{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. 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

Links

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 to make it work on touch devices as well.

Installation

npm install --save vddl

or

yarn add vddl

Usage

import Vue from 'vue';
import Vddl from 'vddl';

Vue.use(Vddl);

Development

# dev
npm install
npm run watch

build

npm run build

run example

cd example && npm install npm run dev

License

MIT

FOSSA Status

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.