OOUI/Elements/Draggable: Difference between revisions

From mediawiki.org

Content deleted Content added

Inline

Revision as of 00:57, 20 June 2019

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


v · d · e

OOUI comes with two mixins that implement the HTML5 Drag and Drop API^[1], OO.ui.mixin.DraggableElement and OO.ui.mixin.DraggableGroupElement. These OOUI implementations ease the use of the API.

By default, the DraggableElement is mixed into OO.ui.TagItemWidget.

A DraggableElement emits these drag events^[2]:

dragend^[3] indicates that the user released their mouse after dragging an item, which ends the drag operation.
dragstart^[4] indicates that the user clicks and hold their mouse on an item and is starting to drag the item.
drop^[5] indicates that the user released their mouse on an item onto a valid target.

OOUI is maintained by the Design System Team.

Get help:

@@ Line 8: / Line 8: @@
 * <code>dragend</code><ref>[https://developer.mozilla.org/en-US/docs/Web/API/Document/dragend_event Mozilla Developer Network: DragEvent - dragend]</ref> indicates that the user released their mouse after dragging an item, which ends the drag operation.
 * <code>dragstart</code><ref>[https://developer.mozilla.org/en-US/docs/Web/API/Document/dragend_event Mozilla Developer Network: DragEvent - dragstart]</ref> indicates that the user clicks and hold their mouse on an item and is starting to drag the item.
-* <code>drop</code><ref>[https://developer.mozilla.org/en-US/docs/Web/API/Document/drop_event Mozilla Developer Network: DragEvent - drop]
+* <code>drop</code><ref>[https://developer.mozilla.org/en-US/docs/Web/API/Document/drop_event Mozilla Developer Network: DragEvent - drop]</ref> indicates that the user released their mouse on an item onto a valid target.
 == References ==