Drag and Drop Events in List Box for Blazor .NET
Whenever an item is dragged within the Blazor List Box component, based on user action several drag and drop events can occur. You can handle these events in your code and provide additional conditions that may alter the default drag and drop functionality.
In this article you will learn about all drag drop events that are supported and how to handle them in different situations. Links on how to handle specific events and sample code is available in Razor and C# .NET.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As item is dragged in the List Box, the list on the right side will display event when fired. As explained in sections below, when item is dragged over target item "Gladiator", it can only drop below it. In other cases you can freely reorder items.
The list on the right displays events that fires during drag drop. You can see the event name, dragged item, target item and drop position. If the event fires multiple times subsequently, it can happen with drag over event, a counter will appear left from the event name stating how many times that event fired. In addition, if an event is cancelled, the event log will add 'cancelled' in red, next to the event message.
Drag and Drop Events that are Supported in Blazor List Box
During item drag and drop operation, several events are fired that you can handle in your code. Here is a list of supported events:
- DragEnd - occurs when drag and drop ends
- DragEnter - occurs when item is dragged over List Box space for the first time
- DragDrop - occurs when item drops
- DragLeave - occurs when dragged item leaves the component space
- DragOver - occurs when item is dragged over List Box space
- DragStart - occurs when drag and drop starts
By adding handlers for these events in your code, you can intercept the drag and drop operation and change its course using custom conditions.
Drag Drop Event Data
The drag and drop event data is represented by IntegralUIDragEventArgs object that contains information about current drag and drop operation in process. Depending on the event, a different data is included. In general, here is a list of data fields available:
- Action - can be move or copy
- Cancel - when set to true the event is cancelled
- Data - a single or multiple items that are dragged
- DropPos - position at which item(s) can drop
- 1 - top space of target item, means item drops above it at same level
- 2 - botom space of target item, means item drops below it at same level
- -1 - tree view space, item drops at the end of the list
- IsDropAllowed> - determines whether item is allowed to drop
- MousePos - the position of the mouse in page coordinates
- SourceCtrl - a reference to the source component from where dragging starts
- Target - specifies the target item over which mouse cursor is hovering
- TargetCtrl - a reference to the target component where item drops
Using the IntegralUIDragDropData, you can share data between different components during drag and drop. In this way you can drop items in other Blazor components, by using this data and handling HTML5 drag and drop events.
How to Handle Drag Enter and Drag Leave Events
The DragEnter and DragLeave events fire only once, the first one when dragged item enters the list space for the first time and the second event when it leaves.
As an example, you can change the component border color whenever mouse cursor enters its space during drag and drop. When mouse cursor leaves the component space, switch back to normal colors.
How to Set Conditions on Drag Over in Blazor List Box
Whenever item is dragged over another item or a different List Box component, the DragOver event will fire. You can create a handler function for this event, where you can set custom conditions that will determine when dragged item can drop.
This event is particularly useful when you need to determine during drag and drop whether target position is correct one for drop. From event data you can use DropPos property and Target property to check whether target item allows drops. In this way, you can create conditions that will allow drag and drop process to continue when fulfilled or cancel it when not.
As an example, when item is dragged over target item "Gladiator", it can only drop below it. So if DropPos property is 1 (it means above target item), set the Cancel property to true. This will change the mouse cursor icon to NO DROP, which means you can't drop the dragged item over this target.
How to Validate Position on Item Drop
When item drops, the DragDrop event will fire. This event concludes the drag and drop operation and it occurs once the drop is completed. You can still cancel this event and prevent item from dropping, if some action on your side is not yet completed.
In similar way like with DragOver event, you can use the same code to determine whether item can drop over specific target item and at which drop position.
You can use this event to make final adjustments prior item drop. For example, you can change the item data, if the TargetCtrl is a component that requires specific data format or additional information. Handling the DragDrop event will allow you to intercept the drag and drop operation and make these adjustments, when some conditions (if any), in your code are met.
How to Cancel Drag and Drop Event
You can cancel the drag and drop operation in all cases, for the specific item or for all items. For example, if you set the Cancel property to true, without any conditions the item can't drop. In similar way like when the AllowDrop property for List Box component is set to false.
Pressing the ESCAPE key will also cancel the drag and drop operation completely.
The more suitable case for cancelling a drop event is to set it if some action required was not yet completed, like when data loading is not yet finished. In addition, it is useful to cancel the item drop in whole when you want to change the item data on your own.
For example, cancel the event and change the item text to 'New Item'. Therefore, any item that drops will have the same name. You can proceed with custom actions to add the dropped item to the new component at location specified by the drop position. You may also need to remove the dragged item from source component, if you canceling the event and moving the dragged item to a new component.
Conclusion
IntegralUI List Box component accompanies several drag and drop events. By handling these events in your code and using the event data properties, you can change the item drag and drop operation in part or completely by setting custom conditions. In some cases, you may even cancel the whole drag and drop process, when conditions are not fulfilled.
IntegralUI for Blazor is a suite of advanced UI components that includes the List Box. You can use it to develop web apps in .NET framework.