How to implement Sortable in Vuejs

Easily add drag-and-drop sorting to your Vue.js applications without jQuery, using the v-sortable directive.

Installation

Usage

Basic Example

here we used v-sortable directive as attribute in ul tag

Customization Example

here we set the object in v-sortable directive.

If you need to pass multiple arguments, it can be cleaner to bind to an object from your VM data.

 

The below implementation will update the order of the source data after an item is sorted using the sortable onUpdate callback.

 

here are list of options which we can used in sortable.

 

Callback methods of Sortable:

 

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes0
No0
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.