OOUI/Elements/Draggable

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

OOUI comes with two mixins that wrap around the HTML5 Drag and Drop API, OO.ui.mixin.DraggableElement and OO.ui.mixin.DraggableGroupElement. These OOUI implementations ease the use of the API.

By default:

• OO.ui.TagItemWidget is a DraggableElement.
• OO.ui.TagMultiselectWidget is a DraggableGroupElement.

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.

Configuration

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.

Events

A 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.

A DraggableGroupElement emits these drag events:

• drag indicates that the user is dragging an item to a new position, but hasn't dropped it yet.
• draggable indicates that the draggable state has changed.

Examples

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.