Drag-and-Drop Sortable with vuejs and vuejs-ui-sortable-vuejs Modules
Easily add simple Example of drag-and-drop (Vue.js Sortable)sorting to your web Vue.js applications without any load jQuery, using the main v-sortable directive, a thin bootsrep wrapper for same the minimalist new SortableJS libs.
Simple Vue component allowing To the drag-and-drop example sorting in sync with View-Model example. Based on vuejs Sortable.jsDrag-and-Drop Sortable with vuejs and vuejs-ui-sortable-vuejs Modules
Features of Vue.js Sortable
- Supports sample touch devices in vuejs
- Supports drag (drag-and-drop ) handles and selectable text
- Smart all of the auto-scrolling
- Support drag and drop two fields between different lists
- No any jQuery (required) dependency
Include Vuejs and Other Libs
[php]
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.min.js
https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js
http://js/index.js
[/php]
index.html
[php]
Sortable – vuejs Modules, Plugins and Directives Example
[/php]
index.js
[php]
Vue.directive( “sortable”, function( value ) {
var that = this,
key = this.arg;
value = value || {};
value.onUpdate = function( e ) {
var vm = that.vm,
array = vm[ key ],
target = array[ e.oldIndex ];
array.$remove( target );
array.splice( e.newIndex, 0, target );
vm.$emit( “sort”, target, e.oldIndex, e.newIndex );
};
Sortable.create( this.el, value );
});
new Vue({
el: “#list”,
data: {
persons: [
{
name: “infinityknow.com”,
description: “We are Web Technology Experts and Team who provide you very Important information on Web Development information.”
}, {
name: “infinityknow.com/tutorial”,
description: “Interview Questions and Answers, live project problem solution and their solution and online free tutorials – “infinityknow.com”.”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
},{
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}, {
name: “infinityknow.com/status”,
description: “infinityknow.com is a Project Free Download at the New School”
}
]
},
events: {
sort: function( item, oldIndex, newIndex ) {
console.log( item );
}
}
});
[/php]