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

<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>

Example

script.js

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.

Example