Drag Drop between ListBox and ListView
IntegralUI ListBox and ListView components come with built-in support for custom drag and drop of multiple items within the same or between different components. In case of a ListBox and ListView, this process is straightforward, because both components inherit from the same base class. The same is also for the IntegralUI TreeView component.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how drag and drop works when moving items from ListBox to ListView and vice versa.
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 above demo, you can select and drag drop multiple items between ListBox and ListView. To select multiple items click on one item and while holding the CTRL or SHIFT key, click on another item. While item(s) is selected start dragging it by moving the mouse cursor in any direction. The item will become detached from the list and now you can drag it to a different position. During dragging, other items will shift their position creating a space where dragged item can drop.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
In addition, you can choose whether drag and drop is allowed or not on general level for both components, using the check boxes below the component. As you can see from the demo, you can easily reorder items within the same component or move them from one component to another.
How to Enable Drag and Drop for ListBox and ListView
Both components have the same properties: allowDrag and allowDrop that determine drag and drop settings on general level. If a component has allowDrag set to true, then you can start dragging items. In similar way, if the component has allowDrop set to true, dragged item(s) are allowed to drop over that component space.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
As above demo shows, using provided check boxes you can choose whether dragging and dropping is allowed per component. For example, you can try setting the drag and drop to work only from left to right, that is from the ListBox to the ListView component. To do this, set the following:
ListBox: allowDrag = true, allowDrop = false
ListView: allowDrag = false, allowDrop = true
How to Prevent an Item from Dragging
Above settings, allow you to set general conditions of item drag and drop, on component level. You can customize it further, by setting conditions on item level.
Each item has allowDrag and allowDrop fields, which determine whether an item is draggable or not, and whether it can accept other items to drop over its space. By default, both of these fields are set to true. To prevent an item from dragging, just simple set its allowDrag field to false.
In this code, the item named "Gladiator" is not draggable.
You can set further conditions by handling the drag and drop events, but to keep it simple they are omitted from this presentation.
Conclusion
Reordering items using drag and drop in ListBox and ListView components is easy and straightforward. You can select one or multiple items and choose how drag and drop will take place. There are conditions on general or item level, and in combination with drag drop events, you can create custom operations that work for your application requirements.
ListBox and ListView are part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.