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
<h3>Vuejs drag and drop from one list to another Example</h3> <div id="list"> <ul> <li>{{$value}}</li> </ul> <div>only ↓</div> <ul> <li>{{$value}}</li> </ul> <hr /> <div class="trash">trash X</div> <div class="trash">trash Y</div> </div>
script.js
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
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);
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.