#DragSource and DropTarget
DragSource and DropTarget in UIToolbox are manipulators for drag and drop between elements at runtime. The UI Toolkit drag events (DragEnterEvent and the others) work only in the Editor. The MDI drop system moves windows and tabs only. The Inventory example drags items between slots with them.
// Drag the item of a slot. Null data starts no drag.
slotElement.AddManipulator(new DragSource(() => slot.Item != null ? slot : null, () => MakeTile(slot.Item)));
// Take a slot whose item fits here.
slotElement.AddManipulator(new DropTarget(data => Move((Slot)data, slot), data => data is Slot from && CanMove(from, slot)));
| Member |
Description |
new DragSource(data, makeGhost) |
data gives the dragged object at the drag start. makeGhost makes the element that follows the pointer. Without it, the ghost is an empty element with the size and classes of the source. |
DragSource.Threshold |
The pixels the pointer moves before a press becomes a drag. Default 6. A shorter move stays a click. |
DragSource.Tilt |
The ghost gets tb-drag-ghost--tilt, which turns it 3 degrees. False keeps the ghost straight. Default true. |
DragSource.IsDragging, Ghost |
The drag state and the ghost element. |
DragSource.Ended |
Raised after the drop or the cancel, with the data and the target that took it, or null. |
DragSource.Denied |
Raised before Ended when the pointer goes up over a target that does not take the data, with the data and that target. |
new DropTarget(dropped, canDrop) |
dropped gets the data of a drop. canDrop decides which data the target takes; null takes all data. |
DropTarget.CanDrop(data), Drop(data) |
The filter, and a drop from code. A keyboard or gamepad move can call Drop. |
DropTarget.At(element) |
The target on the element or its nearest ancestor. |
- The ghost goes into the nearest
Workspace (or the top element of the document), so it gets the workspace theme and the USS rules of the ancestors. It ignores the pointer, and it centers on the pointer. Its margins are set to 0.
- A drop over a child of a target goes to the target.
- A drag holds the pointer capture. A lost capture cancels the drag.
#Styling
| Class |
Element |
tb-drag-source--dragging |
The source during a drag: opacity 0.4. |
tb-drag-ghost |
The element that follows the pointer: opacity 0.85. |
tb-drag-ghost--tilt |
The ghost of a source with Tilt: turned 3 degrees. |
tb-drop-target--hover |
A target under the pointer that takes the data: --tb-color-accent border and --tb-color-surface-hover background. The border shows only when the target has a border width. |
tb-drop-target--denied |
A target under the pointer that does not take the data: --tb-color-danger border. |
