Drag-and-Drop Operations in Collection View for .NET MAUI

• Sep 06, 2023
• 4 minutes to read

The DXCollectionView supports drag-and-drop operations and allows users to reorder items. A user should touch and hold a data item, and then drag and drop it to another position.

To enable drag-and-drop operations, set the AllowDragDropItems property to true.

• Xaml

<dxcv:DXCollectionView AllowDragDropItems="True"/>

Handle Drag-and-Drop Operations

The table below lists events that allow you to handle drag-and-drop operations.

|

Event

|

Description

| | --- | --- | |

DragItem

|

Occurs when a user taps and holds an item to drag it.

| |

DragItemOver

|

Occurs each time an item is dragged over another item.

| |

DropItem

|

Occurs when a user drops an item.

| |

CompleteItemDragDrop

|

Occurs after a drag-and-drop operation is completed.

|

Disable Dragging Specific Items

You can prevent specific items from being dragged.

1. Subscribe to the DragItem event.

2. In the event handler, specify an item(s) that cannot be dragged. Use the ItemHandle or DragItem property to identify the item by its handle or the data source’s item (an EmployeeTask object with the Completed property, in the example below). Set the e.Cancel property to true to prevent the item from being dragged.

Prevent Dropping Items In Specific Positions

The DragItemOver event allows you to manage the drag-and-drop action while a user is moving an item over other items. For example, you can prevent items from being dropped at specific positions. In this case, no place is allocated for an item to be dropped while a user is dragging it over items that you specify.

1. Subscribe to the DragItemOver event.

2. In the event handler, use the ItemHandle property to identify the dragged item, and the DropItemHandle property to identify the drop position. Set the e.Cancel property to true to prohibit the item from being dropped.

Cancel Drag-and-Drop

You can cancel the drag-and-drop operation. In this case, an item is dropped when a user releases it, but then immediately returns to its initial position.

1. Subscribe to the DropItem event.

2. In the event handler, set the e.Cancel property to true to cancel the drop action and return the item to its initial position. Use the ItemHandle property to obtain the dragged item handle and the DropItemHandle property to get the drop position. To access the data source’s item (an EmployeeTask object with the Name property, in the example below) that corresponds to the drop target item, use the DropItem property.

Finalize Drag-and-Drop

You can define an action that is executed when the drag-and-drop operation is completed.

1. Subscribe to the CompleteItemDragDrop event.

2. In the event handler, use the ItemHandle property to get the dropped item handle. To access the data source’s item (an EmployeeTask object with the DueDate property in the example below) that corresponds to the dropped item, use the Item property.

Drag and Drop Sorted Items

If the AllowDragDropItems option is enabled for the CollectionView with sorted items, users can drag items within a group of items with the same value in a sorted field. To allow users to drag sorted items freely, enable the AllowDragDropSortedItems property.

• Xaml

<dxcv:DXCollectionView AllowDragDropItems="True" 
                       AllowDragDropSortedItems="True"/>

If a user drops an item between items with different values in the sorted field, the value of this field in the dragged item changes.