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.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        allowItemReordering: true
    });
});
Angular
HTML
TypeScript
<dx-list ...
    [allowItemReordering]="true">
</dx-list>
import { DxListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
See Also

API

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

  • By index
    Pass the index to the reorderItem(itemIndex, toItemIndex) method. If the List is grouped, this method should be given two objects with the indexes of the groups and the items.

    jQuery
    JavaScript
    var list = $("#listContainer").dxList("instance");
// Places the item with index 1 after the item with index 5 
list.reorderItem(1, 5);
// Takes the item with index 0 from the group with index 2
// and places it to the group with index 4 after the item with index 2 
list.reorderItem(
    { group: 2, item: 0 },
    { group: 4, item: 2 }
);
    Angular
    TypeScript
    import { ..., ViewChild } from '@angular/core';
import { DxListModule, DxListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxListComponent) list: DxListComponent;
    reorderItems (index1, index2) {
        // Places the item with index1 after the item with index2 
        this.list.instance.reorderItem(index1, index2);
    }
    reorderItemsInGroups (groupIndex1, itemIndex1, groupIndex2, itemIndex2) {
        // Takes the item with index itemIndex1 from the group with groupIndex1
        // and places it to the group with groupIndex2 after the item with itemIndex2 
        this.list.instance.reorderItem(
            { group: groupIndex1, item: itemIndex1 },
            { group: groupIndex2, item: itemIndex2 }
        );
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

  • By DOM node
    Pass the DOM node to the reorderItem(itemElement, toItemElement) method.

    jQuery
    JavaScript
    var list = $("#listContainer").dxList("instance");
// Finds all List items
var itemNodes = $("#listContainer").find(".dx-list-item");
// Makes the first item the last
list.reorderItem(itemNodes[0], itemNodes[itemNodes.length-1]);
    Angular
    TypeScript
    import { ..., ViewChild } from '@angular/core';
import { DxListModule, DxListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxListComponent) list: DxListComponent;
    makeFirstItemLast () {
        // Finds all List items
        let itemNodes = document.getElementsByClassName("dx-list-item");
        // Makes the first item the last
        this.list.instance.reorderItem(itemNodes[0], itemNodes[itemNodes.length-1]);
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
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.

jQuery
JavaScript
$(function () {
    $("#listContainer").dxList({
        // ...
        onItemReordered: function(e) {
            var itemData = e.itemData;
            var itemDomNode = e.itemElement;
            var from = e.fromIndex;
            var to = e.toIndex;
            // Handler of the "itemReordered" event
        }
    });
});
Angular
HTML
TypeScript
<dx-list
    (onItemReordered)="onItemReordered($event)">
</dx-list>
import { DxListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxListComponent) list: DxListComponent;
    onItemReordered (e) {
        let itemData = e.itemData;
        let itemDomNode = e.itemElement;
        let from = e.fromIndex;
        let to = e.toIndex;
        // Handler of the "itemReordered" event
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

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