|Working with widgets|
OOUI comes with two mixins that wrap around the HTML5 Drag and Drop API, and . These OOUI implementations ease the use of the API.
DraggableGroupElement. is a
A draggable element must be within a container that is a draggable group element in order to function.
A DraggableGroupElement will aggregate the drop events (dragend, dragstart, and drop), which means it will listen to all of these events from its children, and reorder them accordingly.
A draggable group element can have two different orientations, vertical and horizontal. These orientations control how the draggable elements within the container will be positioned relative to each other.
- When the orientation is vertical, the elements inside will be inline blocks, sitting next to each other and cross over to the next line when the line is filled up.
- When the orientation is horizontal, the elements will be blocks, sitting on top of each other.
It's possible to configure what part of a draggable element can be dragged in. By default, the entire element is draggable.
DraggableElement emits these drag events:
dragend indicates that the user released their mouse after dragging an item, which ends the drag operation.
dragstart indicates that the user clicks and hold their mouse on an item and is starting to drag the item.
drop indicates that the user released their mouse on an item onto a valid target.
DraggableGroupElement emits these drag events:
drag indicates that the user is dragging an item to a new position, but hasn't dropped it yet.
draggableindicates that the draggable state has changed.
The below example shows a drag operation being done inside a vertical-oriented DraggableGroupElement, with handles. This is available from the OOUI demo, which you can interact with.