enhancement
critical
major
minor
minor
critical
#23472
In-app configured drag and drop with pre-target validation
As a user, I would like to receive feedback on the validity of an object in relation to the other objects involved in the drag-and-drop operation as soon as I hover over it during the drag-and-drop process.
If a target is invalid, a “prohibition symbol” should appear next to the mouse pointer, and releasing the mouse on an invalid target should cancel the drag-and-drop operation. In this case, no changes should be made to the objects, nor should an error message be displayed.
Implementation
To check the validity of a drag-and-drop operation, the context is required. This check takes place on the server side, which renders either a “red line” to indicate a possible drop or a “prohibition symbol” marker, depending on the validity. To avoid placing an unnecessary heavy load on the server, there is a client-side cache that temporarily stores previous results indicating whether the dragged element can be dropped onto the target element. Furthermore, there must be a wait of at least 50 ms (initially chosen arbitrarily) between each request.
Usage
A configured drag-and-drop consists of two parts:
- In a drag-enabled component (Tree, Table, TreeTable, etc.), you must configure which elements the user can drag. When editing the component’s view, a dialog appears where you can configure the drag functionality:
In this example, only elements that have a model of type ` NamedPlanElement ` can be dragged.
- In a drop-enabled component, you must configure whether the element can be dropped at a given location and which action is subsequently executed. Similar to configuring a drag, this can be done by editing the component’s view:
The result of the predicate—whether the drop is valid—provides the user with visual feedback. If an element can be dropped at that location, this is indicated to the user by a red line:
- Table: In the tl:TableConfig, for example, the options dragSource and tableDrop
- Tree: In the tl:TreeComponent.Config, e.g., the options dragSource and treeDrop
Test
The DnD functionality can be tested in the Technical Demo > Components > Drag & Drop view. New elements can be created in the template library and dragged and dropped into the factory plan.