Drag Drop Multiple Items in ListBox
When drag and drop is enabled in ListBox component, you can move items one by one within the same or to other components. With multi selection enabled you can also drag and drop multiple items at the same. This article explains how to do that.
You will find sample code that shows how to drag and drop multiple items in ListBox component in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, you can select multiple items by holding CTRL or SHIFT key and clicking on items in the ListBox. Next, by holding the left mouse button and dragging the mouse cursor starting from a selected item, a drag and drop operation will start in which all selected items are carried. On drop, all dragged items are placed at target location.
To create a copy of dragged items, before drop hold the SHIFT key. 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 during drag drop.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Drag and Drop Multiple Items
At first, you need to enable drag and drop in the ListBox by setting the allowDrag property to true. This only allows you to drag items one by one. To enable drag and drop for multiple items, you also need to set the selectionMode property to one of these values:
- MultiSimple - you can select or deselect items by single click
- MultiExtended - you can select items by left-click and CTRL or SHIFT key pressed
Handling the dragOver Event during Multi Drag Drop
Whenever an item or multiple items are dragged over other items, the dragOver event will fire. You can handle this event in your code and provide 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.detail.dragObj field 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 code.
In addition, you can check whether the target item is a valid one and whether the drop position is ok. For example, you can allow drag and drop only if the target item is at position below the top three items. In this way, the first three items can act as fixed ones, while you can reorder all of the other items. If the target item is one of these top three items, you can cancel the drag and drop by setting the e.detail.cancel data field to true.
In this way whenever you drag items over top three items, the mouse cursor will change to NO DROP, stating that you cannot drop items at that location. In addition, top three items are also disabled from dragging, by simple setting their allowDrag field to false.
Conclusion
Drag and Drop feature of ListBox 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 JavaScript, Angular, React and Vue that shows how to drag and drop multiple items. The ListBox is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.