JavaScript/jQuery List - Item Reordering

If you want to allow the user to reorder items on the List, define the itemDragging object and set the allowReordering property within it 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.

$(function() {
    $("#listContainer").dxList({
        // ...
        itemDragging: {
            allowReordering: true,
        }
    });
});

<dx-list ...>
    <dxo-item-dragging
        [allowReordering]="true">
    </dxo-item-dragging>
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

  const 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, { static: false }) list: DxListComponent;
      // Prior to Angular 8
      // @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

  const list = $("#listContainer").dxList("instance");
  // Finds all List items
  const 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, { static: false }) list: DxListComponent;
      // Prior to Angular 8
      // @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

• Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• List Demos
• List API Reference

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 UI component, assign it to the onItemReordered property when you configure the UI component.

$(function () {
    $("#listContainer").dxList({
        // ...
        onItemReordered: function(e) {
            const itemData = e.itemData;
            const itemDomNode = e.itemElement;
            const from = e.fromIndex;
            const to = e.toIndex;
            // Handler of the "itemReordered" event
        }
    });
});

<dx-list
    (onItemReordered)="onItemReordered($event)">
</dx-list>

import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxListComponent, { static: false }) list: DxListComponent;
    // Prior to Angular 8
    // @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.

const itemReorderedEventHandler1 = function(e) {
    // First handler of the "itemReordered" event
};

const itemReorderedEventHandler2 = function(e) {
    // Second handler of the "itemReordered" event
};

$("#listContainer").dxList("instance")
    .on("itemReordered", itemReorderedEventHandler1)
    .on("itemReordered", itemReorderedEventHandler2);

See Also

• Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• List Demos
• List API Reference