Vue Drag and Drop Sortable Example – Vuejs Draggable

Vue Drag and Drop Sortable Example – Vuejs Draggable

A Vue component simple sortable drag-and-drop for Vue.js 2.0 support or a directive based vue sortable for Vue.js 1.0 project all the data content drag-and-drop example sortable, allowing drag-and-drop and simple example synchronization template with MVC based view model arrays.Vue Drag and Drop Sortable Example – Vuejs Draggable

index.html

[php]

Vuejs drag and drop from one list to another Example

[/php]

Example

script.js

[php]
var _, liveApp, vmdropsecond;

liveApp = {
el: ‘#list’,
data: {
listdatafirst: [‘a’, ‘b’, ‘c’, ‘d’],
listdatasecond: [‘A’, ‘B’, ‘C’, ‘D’]
},
methods: {
sort: function(list, id, tag, data) {
var basiclevel;
basiclevel = list[data.index];
list.splice(data.index, 1);
return list.splice(id, 0, basiclevel);
},
move: function(from, to, id, tag, data) {
var basiclevel;
basiclevel = from[data.index];
from.splice(data.index, 1);
return to.splice(id, 0, basiclevel);
},
remove: function(from, tag, data) {
return from.splice(data.index, 1);
}
}
};

_ = {
on: function(el, name, cb) {
return el.addEventListener(name, cb);
},
off: function(el, name, cb) {
return el.removeEventListener(name, cb);
}
};

vmdropsecond = ”;

liveApp.directives = {
draggable: {
bind: function() {
this.data = {};
this.dragstart = (function(_this) {
return function(e) {
e.target.classList.add(_this.data.dragged);
e.dataTransfer.effectAllowed = ‘all’;
e.dataTransfer.dropEffect = ‘copy’;
e.dataTransfer.setData(‘data’, JSON.stringify(_this.data));
e.dataTransfer.setData(‘tag’, _this.arg);
vmdropsecond = _this.arg;
console.log(‘start’, _this.arg, _this.data);
return false;
};
})(this);
this.dragend = (function(_this) {
return function(e) {
e.target.classList.remove(_this.data.dragged);
console.log(‘end’, _this.arg);
vmdropsecond = ”;
return false;
};
})(this);
this.el.setAttribute(‘draggable’, true);
_.on(this.el, ‘dragstart’, this.dragstart);
return _.on(this.el, ‘dragend’, this.dragend);
},
unbind: function() {
this.el.setAttribute(‘draggable’, false);
_.off(this.el, ‘dragstart’, this.dragstart);
return _.off(this.el, ‘dragend’, this.dragend);
},
update: function(value, old) {
return this.data = value;
}
},
dropzone: {
acceptStatement: true,
bind: function() {
this.dragenter = (function(_this) {
return function(e) {
if (vmdropsecond === _this.arg) {
e.target.classList.add(_this.arg);
}
return false;
};
})(this);
this.dragleave = (function(_this) {
return function(e) {
if (vmdropsecond === _this.arg) {
e.target.classList.remove(_this.arg);
}
console.log(‘leave’, _this.arg);
return false;
};
})(this);
this.drop = (function(_this) {
return function(e) {
var data, tag;
if (e.preventDefault) {
e.preventDefault();
}
data = e.dataTransfer.getData(‘data’);
tag = e.dataTransfer.getData(‘tag’);
if (vmdropsecond === _this.arg) {
_this.handler(tag, JSON.parse(data));
e.target.classList.remove(_this.arg);
}
console.log(‘drop’, _this.arg);
return false;
};
})(this);
this.dragover = (function(_this) {
return function(e) {
if (e.preventDefault) {
e.preventDefault();
}
if (vmdropsecond === _this.arg) {
e.dataTransfer.effectAllowed = ‘all’;
e.dataTransfer.dropEffect = ‘copy’;
} else {
e.dataTransfer.effectAllowed = ‘none’;
e.dataTransfer.dropEffect = ‘link’;
}
return false;
};
})(this);
_.on(this.el, ‘dragenter’, this.dragenter);
_.on(this.el, ‘dragover’, this.dragover);
_.on(this.el, ‘dragleave’, this.dragleave);
return _.on(this.el, ‘drop’, this.drop);
},
unbind: function() {
console.log(‘- dropzone’);
_.off(this.el, ‘dragenter’, this.dragenter);
_.off(this.el, ‘dragover’, this.dragover);
_.off(this.el, ‘dragleave’, this.dragleave);
return _.off(this.el, ‘drop’, this.drop);
},
update: function(value, old) {
var dragvam;
dragvam = this.dragvam;
return this.handler = function(tag, data) {
var result;
dragvam.$droptag = tag;
dragvam.$dropdata = data;
result = value(tag, data);
dragvam.$droptag = null;
dragvam.$dropdata = null;
return result;
};
}
}
};

new Vue(liveApp);

[/php]

Vue component simple allowing drag-and-drop directive sorting in sync data with View-Model using vuejs. Based on Sortable.js Example.Draggable component simple should directly change data wrap the draggable HTML elements, or a simple transition-component containing all the data content the draggable DOM elements.

Example