Vue Reorder List

Posted on  by admin
The item reorder feature allows the end users to change the position of an item by dragging it.

This is particularly useful in scenarios where lists of items with priorities are created.

Reordering an item is used to change the item's priority.

The Item Reorder feature is enabled by setting the itemReorder property to true. The following simple scenario demonstrates how the item-reorder feature is used.

A handler for the itemReordered event is provided which prints out the indices of the item being reordered.


Think of it as a way to transfer data from some components to others using the mouse or support for a mouse assisted copy/cut - paste.

It also allows for lists to be reordered by drag and drop.

These demos are meant to be pretty and reflect real life examples.

For more barebones examples, see the manual. The following demo features list reordering, drag and drop between two lists, custom drag images and custom feedback when inserting new items.

It uses Vuetify components. The following demo features drag and drop between a table and a list, custom drag images and a custom style for drop areas when the drop is allowed.

It uses Vuetify components.

There are four components : Drag, Drop, DropMask and DropList.