Home

Awesome

<br> <p align="center"> <a href="http://hejx.space/vddl"> <img src="https://raw.githubusercontent.com/hejianxian/vddl/master/media/Vddl-400.png" width="200" alt="vddl"/> </a> </p> <p align="center"> Vue components for modifying lists with the HTML5 drag & drop API. </p> <p align="center"> <a href="https://travis-ci.org/hejianxian/vddl"><img alt="Travis Status" src="https://img.shields.io/travis/hejianxian/vddl/master.svg?style=flat-square"></a> <a href="https://www.npmjs.com/package/vddl"><img alt="npm" src="https://img.shields.io/npm/v/vddl.svg?style=flat-square"></a> <a href="https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fhejianxian%2Fvddl?ref=badge_shield" alt="FOSSA Status"><img src="https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fhejianxian%2Fvddl.svg?type=shield"/></a> </p>

💥Warning💥

<vddl-list :list="list">
    <vddl-draggable class="panel__body--item" 
      v-for="(item, index) in list" 
      :key="item.id" // It's best to use a unique id. Remember, don't use 'index'.
      ...
      >
      {{item.label}}
    </vddl-draggable>
</vddl-list>

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

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