hejianxian / vue-drag-and-drop-list Goto Github PK

View Code? Open in Web Editor NEW

332.0 25.0 54.0 758 KB

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

Home Page: https://hejx.herokuapp.com/vue-dndl/#!/

License: MIT License

JavaScript 100.00%

vue html5-drag

vue-drag-and-drop-list's Introduction

vue-drag-and-drop-list

Vue directives that allow you to build sortable lists with the native HTML5 drag & drop API. Supports nested lists for building trees and other fancy structures.

😮 Now support 2.0, see vddl 👏👏

Demo

Not supported VueJS 2.0

Directive interface change

In general, in 2.0 directives have a greatly reduced scope of responsibility: they are now only used for applying low-level direct DOM manipulations. In most cases, you should prefer using Components as the main code-reuse abstraction.

✌️This mean it should be a component. You can view vddl.

Supported browsers

IE9+ and all modern browsers are supported.

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 vue-drag-and-drop-list --save

yarn add vue-drag-and-drop-list

Usage

import Vue from 'vue';
import vueDragAndDropList from 'vue-drag-and-drop-list';

Vue.use(vueDragAndDropList);

or include as an inline script.

Required CSS styles

Both the dnd-list and it's children require relative positioning, so that the directive can determine the mouse position relative to the list and thus calculate the correct drop position.

ul[dnd-list], ul[dnd-list] > li {
    position: relative;
}

Wiki

you should read the Vue directive doc first.

Development

npm install
npm run watch // rollup watch

npm run build //rollup -c

Run Demo

cd demo

// vue project
npm install
npm run dev // webpack

See all demos source code in 'views/*.vue' file.

Thanks

angular-drag-and-drop-lists

License

MIT

vue-drag-and-drop-list's People

Contributors

Stargazers

Watchers

vue-drag-and-drop-list's Issues

dndDragend no working

Dynamically reate new Container

How would I achieve this? :)

请帮忙出一个vue2.0版本的

vue 2.0版本我改造后先插入数据后删除，索引出现问题

how to make dnd-draggable nodrap?

I got something wrong.

Hi!
Is there some easier simples?I'm a freshman and I got something wrong which i don't know why.Infect I just copied and pasted your code.Here is my code and debugs
This is my Main.vue .

HTML:

        <div class="panel panel-vue">
            <div class="panel-heading">
                <h3 class="panel-title">List {{listName}}</h3>
            </div>
            <div class="panel-body">
                <ul v-dnd-list :dnd-list="list" :dnd-horizontal-list="false">
                    <li v-dnd-draggable v-for="item in list"
                        :dnd-draggable="item"
                        :dnd-index="$index"
                        :dnd-data="list"
                        dnd-selected="selectedEvent"
                        dnd-effect-allowed="move"
                        dnd-dragstart="handleDragstart"
                        dnd-dragend="handleDragend"
                        dnd-canceled="handleCanceled"
                        v-bind:class="{'selected': selected === item}">
                        {{item.label}}
                    </li>
                    <li class="dndPlaceholder red">Custom placeholder</li>
                </ul>
            </div>
        </div>

SCRIPT:

   import Vue from 'vue';
   import vueDragAndDropList from 'vue-drag-and-drop-list';

   Vue.use(vueDragAndDropList);

   export default {
    name: 'Main',
    data() {
      return  {
        "selected": null,
        "lists": {
          "A": [
            {
              "label": "Item A1",
              "disable": false
            },
            {
              "label": "Item A2"
            },
            {
              "label": "Item A3"
            },
            {
              "label": "Item A4"
            }
          ],
          "B": [
            {
              "label": "Item B1"
            },
            {
              "label": "Item B2"
            },
            {
              "label": "Item B3"
            },
            {
              "label": "Item B4"
            }
          ]
        }
      }
    }
  }

DEBUGS:

Thanks and keep up the good work!

Wouter