Skip to content
DnD (drag and drop) plugin for Vue.js
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Jan 3, 2015
LICENSE Initial commit Jan 3, 2015
README.md Add more detailed document Feb 25, 2015
bower.json Add bower.json Feb 25, 2015
index.js add index.js Jan 3, 2015
package.json fix version Jan 3, 2015

README.md

vue-dnd

DnD (drag and drop) plugin for Vue.js

Usage

There are two directives: v-draggable and v-dropzone. Add v-draggable to element to drag, and v-dropzone to element to be dropped.

In following example, {id: id, index: $index} is defined in v-draggable and passed from draggable item to drop zone. The value can be received via $dropdata.

<div id="list">
  <ul>
    <li v-repeat="icons" v-draggable="icon: {id: id, index: $index}">{{$value}}</li>
  </ul>
  <div id="trashcan" v-dropzone="icon: remove($dropdata.id, $dropdata.index)"></div>
</div>

You can use vue-dnd by calling Vue.use(require('vue-dnd')); before you define your Vue object.

Vue.use(require('vue-dnd'));

new Vue({
  el: '#list',
  // ...
  methods: {
    remove: function(id, $index) {
      // ...
    },
  },
});

v-draggable

v-draggable="droptag: dropdata"
  • droptag: Tag to connect draggable element and dropped element. The same tag should be given to both v-draggable and v-dropzone.
  • dropdata: object to be passed as arguments to function run on drop. If you define { a: "blah", b: "blahblah" }, you can get "blah" from $dropdata.a and "blahblah" from $dropdata.b.

v-dropzone

v-dropzone="droptag: functionToRun"
  • droptag: Tag to connect draggable element and dropped element. The same tag should be given to both v-draggable and v-dropzone.
  • functionToRun: Function to run on drop. You can receive dropdata defined in v-draggable as $dropdata and droptag as $droptag

example

http://jsfiddle.net/lain8dono/mrnyf79e/

js

'use strict';
Vue.use(require('vue-dnd'));
new Vue({
    el: '#list',
    data: {
      listX: ['a', 'b', 'c', 'd'],
      listY: ['A', 'B', 'C', 'D'],
    },
    methods: {
      sort: function(list, id, tag, data) {
        var tmp = list[data.index];
        list.splice(data.index, 1);
        list.splice(id, 0, tmp);
      },
      move: function(from, to, id, tag, data) {
        var tmp = from[data.index];
        from.splice(data.index, 1);
        to.splice(id, 0, tmp);
      },
      remove: function(from, tag, data) {
        from.splice(data.index, 1);
      },
    },
});

html

<div id="list">
  <ul>
    <li v-repeat="listX"
    v-draggable="x: {index: $index, dragged: 'dragged'}"
    v-dropzone="x: sort(listX, $index, $droptag, $dropdata)">{{$value}}</li>
  </ul>
  <div>only ↓</div>
  <ul>
    <li v-repeat="listY" v-draggable="y: {index: $index, dragged: 'dragged'}" v-dropzone="
      y: sort(listY, $index, $droptag, $dropdata),
      x: move(listX, listY, $index, $droptag, $dropdata)
    ">{{$value}}</li>
  </ul>
  <hr />
  <div class="trash" v-dropzone="x: remove(listX, $droptag, $dropdata)">trash X</div>
  <div class="trash" v-dropzone="y: remove(listY, $droptag, $dropdata)">trash Y</div>
</div>

css

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}
ul {
    list-style: none;
    padding: 0 0 0 5px;
    margin: 0;
    background: #666;
    width: 200px;
}
li {
    box-sizing: border-box;
    border-left: 4px solid transparent;
    padding: 0 0 0 5px;
    color: white;
}
li:hover:after {
    color: #c00;
    font-size: x-small;
    content:" (drag me)";
}
li.dragged {
    opacity: 0.4;
    color: black;
}
li.x {
    border-left: 4px dotted #00c;
}
li.y {
    border-left: 4px dotted #0c0;
}
li.over-no {
    text-decoration: line-through;
}
.trash {
    width: 300px;
    height: 30px;
    background: #666;
    color: white;
}
.trash.x {
    background: #00c;
}
.trash.y {
    background: #0c0;
}
You can’t perform that action at this time.