Skip to content
InfinityKnow

InfinityKnow

Infinity Knowledge (IK) : Technology, Articles, Topics, Facts or many More.

  • Home
  • Education
    • yttags
    • Make Money
    • Jobs
    • Programming
      • Technology
      • Web Design
      • WEB HOSTING
      • Interview
  • Entertainment
    • pakainfo
    • Sports
    • Tips and Tricks
      • Law
      • Photography
      • Travel
  • Health
    • Insurance
    • Lifestyle
      • Clothing
      • Fashion
      • Food
  • News
    • Insurance
      • Auto Car Insurance
      • Business Insurance
    • Donate
    • California
  • News
    • Political
  • Home Improvement
  • Trading
    • Marketing
    • Top Tranding
    • Business
    • Real Estate
  • Full Form
  • Contact Us
  • Laravel Multiple Order By Columns Technology
  • cnf full form – cnf Kya Hai, Meaning and Abbreviation – What is the full form of cnf ? full form
  • sez full form – sez Kya Hai, Meaning and Abbreviation – What is the full form of sez? full form
  • MoviezWap
    MoviezWap 2021 Hindi Bollywood,Hollywood,Tamil Movies Download Movies
  • Switching HTTPS Fix
    Switching HTTPS Fix broken visual editor on WordPress Technology
  • Vue JS carousel image Slider Example – Vuejs Image Slider
    Vue JS carousel image Slider Example – Vuejs Image Slider Technology
  • Science Workshops for Kids
    5 ways to make a Science workshop interactive and engaging Uncategorized
  • C# Print Alphabet Triangle Tutorial with Examples Technology
Vue Drag and Drop Sortable Example – Vuejs Draggable

Vue Drag and Drop Sortable Example – Vuejs Draggable

Posted on November 26, 2018 By admin No Comments on 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

  • {{$value}}
only ↓
  • {{$value}}

trash X
trash Y

[/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);
}
}
};

READ :  CCAvenue Payment Gateway Integration using PHP

_ = {
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;
};
}
}
};

READ :  Drag-and-Drop Sortable with vuejs and vuejs-ui-sortable-vuejs Modules

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

Related posts:

  1. Drag-and-Drop Sortable with vuejs and vuejs-ui-sortable-vuejs Modules
  2. Vue js Drag and Drop Customizable list – step by step
  3. Vue js Drag and drop multiple file upload with progress bar
  4. Angularjs Draggable Table Rows Example
Technology, VueJs Tags:vue 2 drag and drop, vue drag event, vue draggable jsfiddle, vue draggable table, vue sortable, vue.draggable demo, vue.draggable npm, vue2 drag and drop

Post navigation

Previous Post: VueJS Features and Benefits – Vuejs advantages and disadvantages
Next Post: VueJS Dynamic v-model value directive

Related Posts

  • Search Comma Separated values using Laravel Query FIND_IN_SET
    Search Comma Separated values using Laravel Query FIND_IN_SET Technology
  • Angularjs Convert Comma separated String To Array Example
    Angularjs Convert Comma separated String To Array Example Technology
  • 4 pillars of business strategy
    4 Most Important Pillars for Establishing any Business-Here’s How – 4 pillars of business strategy Technology
  • Vue js Timing Events setTimeout Function
    Vue js Timing Events setTimeout Function Technology
  • Angular Form Validation ngMessages Technology
  • Windows 10 Product Keys 100% Working Activation – windows 10 activation key free Technology

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Account web hosting (1)
  • AngularJs (277)
  • Articles (143)
  • Asp.Net (49)
  • Astrology (2)
  • Attorney (7)
  • Auto Car Insurance (4)
  • Biography (2)
  • Business (9)
  • Business Insurance (3)
  • California (4)
  • Choose the web hosting (1)
  • Clothing (6)
  • cloud (8)
  • Cloud data storage (2)
  • Credit (1)
  • Dedicated hosting server web (1)
  • Dedicated server web hosting (1)
  • Dedicated web hosting (1)
  • Degree (11)
  • Design (9)
  • Differences shared hosting (1)
  • Donate (2)
  • Education (37)
  • Energy web hosting (1)
  • Entertainment (6)
  • Facts (12)
  • Fashion (3)
  • Finance (3)
  • Food (5)
  • full form (90)
  • Google Adsense (22)
  • Health (21)
  • Home Improvement (5)
  • Insurance (7)
  • Interview (2)
  • Jobs (6)
  • jquery (2)
  • jQuery (2)
  • Laravel (164)
  • Lawyer (4)
  • Lifestyle (6)
  • Loans (6)
  • Make Money (31)
  • Managed dedicated server (1)
  • Managed hosting solution (1)
  • Managed servers (1)
  • Marketing (8)
  • Mortgage (2)
  • Movies (21)
  • MySQL (180)
  • News (5)
  • Photography (1)
  • PHP (250)
  • Programming (18)
  • Quotes (75)
  • Real Estate (2)
  • SEO (9)
  • Shared web hosting (1)
  • Shayari (67)
  • Sports (5)
  • Status (34)
  • Stories (45)
  • suvichar (8)
  • Tech (3)
  • Technology (675)
  • Tips and Tricks (43)
  • Top Tranding (36)
  • Trading (28)
  • Travel (12)
  • Uncategorized (8)
  • VueJs (179)
  • Web Design (2)
  • WEB HOSTING (1)
  • Web hosting company (1)
  • Web hosting really (1)
  • Web hosting windows (1)
  • Which website hosting (1)
  • Wishes (13)
  • wordpress (15)

Categories

AngularJs (277) Articles (143) Asp.Net (49) Attorney (7) Business (9) Clothing (6) cloud (8) Degree (11) Design (9) Education (37) Entertainment (6) Facts (12) Food (5) full form (90) Google Adsense (22) Health (21) Home Improvement (5) Insurance (7) Jobs (6) Laravel (164) Lifestyle (6) Loans (6) Make Money (31) Marketing (8) Movies (21) MySQL (180) News (5) PHP (250) Programming (18) Quotes (75) SEO (9) Shayari (67) Sports (5) Status (34) Stories (45) suvichar (8) Technology (675) Tips and Tricks (43) Top Tranding (36) Trading (28) Travel (12) Uncategorized (8) VueJs (179) Wishes (13) wordpress (15)
  • C# SortedSet Tutorial with Examples Technology
  • Laravel Blade Template Engine Layouts
    Laravel Blade Template Engine Layouts Laravel
  • AngularJS and SEO Dynamically Title with Meta Description
    AngularJS and SEO Dynamically Title with Meta Description Technology
  • AngularJS Datetime format filter in controller
    AngularJS Datetime format filter in controller Technology
  • AngularJs Global Constants Set and Get Variables
    AngularJs Global Constants Set and Get Variables Technology
  • Angular 6 Interview Questions and Answers
    Angular 6 Interview Questions and Answers Technology
  • Raksha_Bandhan
    raksha bandhan in hindi Stories
  • Laravel 6 Session Create Access and Destroy Technology

Copyright © 2022 InfinityKnow.

Powered by PressBook News WordPress theme