Need Help With Vue Development?

Work with our skilled Vue developers to accelerate your project and boost its performance.

Hire Vuejs Developers

Support On Demand!

Steps

Add the end event handler to the draggable component. This event is fired after the drag-and-drop action is completed.

<draggable v-model="items" @end="onEnd"> <div v-for="item in items" :key="item.order"> {{ item.name }} </div> </draggable>

Update the order of the items within the event handler.

onEnd(event) { 
 this.items.forEach((item, index) => { item.order = index; }); 
}

Related Q&A