Example of Drag And Drop in ASP.NET Core List Box Control

This sample demonstrates the drag and drop functionalities of a ListBox. Drag an item or a group of selected items and drop it within the same list box or into another list box.

DEMO

SOURCE

Group A

Group B

The ListBox component allows the user to drag and drop a desired item from one list box into another list box. The drag and drop feature can be enabled by using the following properties,

To drag and drop a desired item within the ListBox, the allowDragAndDrop property should be set to true.
To drag and drop between two listboxes, the scope property should be set to both the listboxes.

In this sample, a list of countries is loaded in Group A and another list of countries is loaded in Group B. You can drag and drop an item or multiple items from Group A to Group B, and vice versa. By clicking update button, user can save the changes to the corresponding JSON using Datamanager saveChanges method.

More information about drag and drop functionalities in the ListBox can be found in the Documentation section.