Vue 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.

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>
See Also

API

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

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

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>
See Also