DevExtreme Vue - Item Reordering

User Interaction

If you want to allow the user to reorder items on the List, set the allowItemReordering option to true. This setting supplies each List item with a button that enables the user to move the item with drag-and-drop on mouse-equipped platforms or with touch-and-drag on touch-enabled devices.

See Also

API

You can reorder List items from code in the following ways.

See Also

Events

To execute certain commands when an item changes its position, handle the itemReordered event. If the event handling function is not going to be changed during the lifetime of the widget, assign it to the onItemReordered option when you configure the widget.

If you are going to change the itemReordered event handler at runtime, or if you need to attach several handlers to this event, subscribe to it using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript
  • var itemReorderedEventHandler1 = function(e) {
  • // First handler of the "itemReordered" event
  • };
  •  
  • var itemReorderedEventHandler2 = function(e) {
  • // Second handler of the "itemReordered" event
  • };
  •  
  • $("#listContainer").dxList("instance")
  • .on("itemReordered", itemReorderedEventHandler1)
  • .on("itemReordered", itemReorderedEventHandler2);
See Also