DragAction
This a decorator which adds draggable functionality to elements. To define draggable actions on specific elements, handles can be used. A handle is given a special attribute :
coral-dragaction
attribute adds draggable functionality to the corresponding element.coral-dragaction-handle
attribute allows dragging only by dragging the specified handle.coral-dragaction-dropzone
attribute is used to indicate possible dropzones making it possible to build drag-and-drop enabled interfaces in conjunction withDragAction
events.coral-dragaction-axis
and setting it to eitherhorizontal
orvertical
, it is possible to restrict the drag'n'drop to a single axis.coral-dragaction-scroll
attribute will scroll the container when the draggable is moved beyond the viewport.coral-dragaction-containment
, the draggable element will be constrained to its container.
Example:
new Coral.DragAction();
Static Member Summary
Static Public Members | ||
public static |
Returns DragAction axis restrictions. |
Constructor Summary
Public Constructor | ||
public |
constructor(dragElement: HTMLElement) Takes the {HTMLElement} to be dragged as argument. |
Member Summary
Public Members | ||
public |
The axis to constrain drag movement. |
|
public |
Whether to constrain the draggable element to its container viewport. |
|
public |
The draggable element. |
|
public |
The dropZone to drop the dragged element. |
|
public |
The handle allowing to drag the element. |
|
public |
Whether to scroll the container when the draggable element is moved beyond the viewport. |
Static Public Members
Public Constructors
public constructor(dragElement: HTMLElement) source
Takes the {HTMLElement} to be dragged as argument.
Params:
Name | Type | Attribute | Description |
dragElement | HTMLElement |
Public Members
public axis: String source
The axis to constrain drag movement. See DragActionAxisEnum.
DragActionAxisEnum.FREE
by default.