Enhancement
Critical
Major
Detail
Detail
Critical
#23472
In-app configured drag and drop with pre-target validation
As a user, I would like to receive feedback about the validity of an object in the context of the objects of the drag&drop operation already when hovering over the object during a drag&drop operation.
If a target is not valid, a "prohibition sign" should be displayed at the mouse pointer and releasing on a not valid target should cancel the drag&drop operation. No changes should be made to objects, nor should an error message be displayed.
Conversion
To check the validity of a drag and drop operation the context is needed. This check takes place on the server side, which renders a "red line" as a marker for a possible drop or a "prohibition sign" marker depending on the validity. On the one hand, in order not to put an unnecessarily heavy load on the server, there is a cache on the client side that caches previous results on whether the dragged element can be dropped on the target element. Furthermore, at least 50ms (arbitrarily chosen for now) must be waited between each request.
Usage
A configured Drag&Drop consists of 2 parts:
- In a drag enabled component (Tree, Table, TreeTable, etc.) you have to configure which elements can be dragged by the user. If you edit the view of the component, you get a dialog where the drag can be configured:
In this example, only elements that have a model of type NamedPlanElement can be dragged.
- In a drop-enabled component, it must be configured whether the element can be dropped at a given position and what action is executed afterwards. This can be configured, analogous to the configuration of a drag, by editing the view of the component:
The result of the predicate, whether the drop is valid, provides visual feedback to the user. If an element can be dropped in place, then this is indicated to the user by a red line:
- Table: In the tl:TableConfig ex. the dragSource and tableDrop options.
- Tree: In the tl:TreeComponent.Config ex. the options dragSource and treeDrop
Test
In the Technical Demo > Components > Drag & Drop view the DnD functionality can be tested. In the template library new elements can be created and dragged into the factory plan via DnD.