Drag Drop Multiple Items in Blazor List Box
When drag and drop is enabled in Blazor List Box component, you can move items one by one within the same or to other components. In addition, with multi selection enabled you can drag and drop multiple items at the same. This article explains how to do that Blazor .NET.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
To select multiple items, press and hold the CTRL or SHIFT key and click on items in the list. Next, by holding the left mouse button and dragging the mouse cursor in any direction starting from a selected item, a drag and drop operation will start in which all selected items are dragged. By releasing the mouse button, all dragged items will drop at target position.
You can also create a copy of dragged items, by holding the SHIFT key before drop. In this way, instead of original items, copies are created and dropped at target position. This allows you to choose whether you want to move or copy multiple items with drag and drop.
How to Drag and Drop Multiple Items
At first, you need to enable the drag and drop functionality in the Blazor List Box component, by setting the AllowDrag property to true. In addition, to enable drag and drop for multiple items, you also need to set the SelectionMode property to one of the following:
- MultiSimple - you can select or deselect items by single click or touch
- MultiExtended - you can select items by left-click and CTRL or SHIFT key pressed
Handling DragOver Event in List Box for Blazor .NET
Whenever one or multiple items are dragged, the DragOver event will fire. You can handle this event in your code and set custom conditions. Depending on condition set, you can choose whether to continue or cancel the drag and drop operation.
In case when multiple items are dragged, the DragOver event data holds an array of all dragged items. You can check this data in your event handler:
As you can see, a check to the e.Data property is set to determine whether it is an array or a single object. Depending on this value, you can proceed with the event by adding custom action.
In addition, you can check whether the target item is a valid one and whether the drop position is correct. For example, you can allow drag and drop only at position below the target item. This means, if e.DropPos is 1 (that is above target item), cancel the drag and drop by setting the e.Cancel property to true.
In this way whenever you drag item(s) over top three items, the mouse cursor will change to a NO DROP, stating that you cannot drop items at that position. In addition, top three items in the list are also disabled from dragging, by simple setting their AllowDrag property to false.
Conclusion
Drag and Drop feature of List Box component allows you to reorder items within the component itself during run-time. If multi selection is enabled, you can drag and drop multiple items at once and place them at different position. In this process, you can add event handlers with your own custom conditions that may alter the drag and drop operation.
A sample code is available in Razor and C# .NET that shows how to drag and drop multiple items. The List Box is an UI component, part of IntegralUI for Blazor that you can use to develop web application in Blazor .NET framework.