Angular List - Item Reordering

User Interaction

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.

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        itemDragging: {
            allowReordering: true,
        }
    });
});
Angular
HTML
TypeScript
<dx-list ...>
    <dxo-item-dragging
        [allowReordering]="true">
    </dxo-item-dragging>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList ... >
        <DxItemDragging
            :allow-reordering="true"
        />
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxList, {
    DxItemDragging
} from 'devextreme-vue/list';

export default {
    components: {
        DxList,
        DxItemDragging
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List, {
    ItemDragging
} from 'devextreme-react/list';

export default function App() {
    return (
        <List ... >
            <ItemDragging
                allowReordering={true}
            />
        </List>
    );
}
See Also
jQuery
Angular
Vue
React

API

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

jQuery
JavaScript
const list = $("#listContainer").dxList("instance");
// Place an item with index 1 after an item with index 5 
list.reorderItem(1, 5);
// Take an item with index 0 from a group with index 2
// and place it to a group with index 4 after an 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) {
        // Place an item with `index1` after an item with `index2` 
        this.list.instance.reorderItem(index1, index2);
    }
    reorderItemsInGroups (groupIndex1, itemIndex1, groupIndex2, itemIndex2) {
        // Take an item with index `itemIndex1` from a group with `groupIndex1`
        // and place it to a group with `groupIndex2` after an item with `itemIndex2`
        this.list.instance.reorderItem(
            { group: groupIndex1, item: itemIndex1 },
            { group: groupIndex2, item: itemIndex2 }
        );
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList ...
        :ref="listRefKey"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxList from 'devextreme-vue/list';

const listRefKey = "my-list";
// ...
export default {
    components: {
        DxList
    },
    data() {
        return {
            // ...
            listRefKey
        }
    },
    methods: {
        reorderItems (index1, index2) {
            // Place an item with `index1` after an item with `index2` 
            this.list.reorderItem(index1, index2);
        },
        reorderItemsInGroups (groupIndex1, itemIndex1, groupIndex2, itemIndex2) {
            // Take an item with index `itemIndex1` from a group with `groupIndex1`
            // and place it to a group with `groupIndex2` after an item with `itemIndex2`
            this.list.reorderItem(
                { group: groupIndex1, item: itemIndex1 },
                { group: groupIndex2, item: itemIndex2 }
            );
        }
    },
    computed: {
        list: function() {
            return this.$refs[listRefKey].instance;
        }
    }
}
</script>
React
App.js
import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

import List from 'devextreme-react/list';
// ...
export default function App() {
    const list = useRef(null);
    const reorderItems = (index1, index2) => {
        // Place an item with `index1` after an item with `index2` 
        list.current.instance().reorderItem(index1, index2);
    };
    const reorderItemsInGroups = (groupIndex1, itemIndex1, groupIndex2, itemIndex2) => {
        // Take an item with index `itemIndex1` from a group with `groupIndex1`
        // and place it to a group with `groupIndex2` after an item with `itemIndex2`
        list.current.instance().reorderItem(
            { group: groupIndex1, item: itemIndex1 },
            { group: groupIndex2, item: itemIndex2 }
        );
    }
    return (
        <List ...
            ref={list}
        />
    );
}
See Also
jQuery
Angular
Vue
React

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

jQuery
JavaScript
$(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
        }
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxList ...
        @item-reordered="onItemReordered">
        <!-- ... -->
    </DxList>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxList from 'devextreme-vue/list';

export default {
    components: {
        DxList
    },
    // ...
    methods: {
        onItemReordered (e) {
            const itemData = e.itemData;
            const itemDomNode = e.itemElement;
            const from = e.fromIndex;
            const to = e.toIndex;
            // Handler of the "itemReordered" event
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import List from 'devextreme-react/list';

const onItemReordered = (e) => {
    const itemData = e.itemData;
    const itemDomNode = e.itemElement;
    const from = e.fromIndex;
    const to = e.toIndex;
    // Handler of the "itemReordered" event
};

export default function App() {
    return (
        <List ...
            onItemReordered={onItemReordered}>
            {/* ... */}
        </List>
    );
}
jQuery

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.

JavaScript
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
jQuery
Angular
Vue
React