Draggable plugin
Frontfire UI allows making any element draggable by mouse, touch or other pointer interaction.
This plugin is available in the Minimal and Complete bundles.
Description
Draggable elements allow the user to pick and move an element to another position on the page.
Call the draggable()
plugin method on any element to add the draggable feature.
The element movement can be constrained by providing options to that method or handling events.
This feature provides a low-level behaviour to elements that usually is not used on its own but rather by other Frontfire UI features to build upon it.
The examples on this page use additional CSS styles that are not shown in the source boxes. Read the source code of this page or use the browser’s DOM inspector to see these styles.
Basic examples
Here are examples that demonstrate the basic usage of the draggable feature. These static-positioned elements will be changed to relative position to maintain their new position but still take their space in the layout flow. You can also start with absolute-positioned elements which won’t be changed then. Touch actions to scroll the page are disabled in the direction the elements may be dragged.
Draggable within a container
The allowed placement of a draggable element can be restricted to another element or the parent element with the containment
option.
Auto-scrolling
With the scroll
option, the page will be scrolled if the element is dragged out of the viewport.
Reverting
Stacking
Usually, dragged elements maintain their original Z order, which is the document order by default.
With the stack
option, each last-moved element is brought on top of all other elements selected by the CSS selector.
Drag handle
Instead of starting the drag operation anywhere on an element, handles and cancel regions can be defined that are the only place where elements can be dragged or places where no dragging can be initiated, respectively. These handles can also lie outside of the element.
here or here
Snapping to grid within the container
Drag move event handler
The following draggable element will stick to a circle line around the centre.
By handling the draggablemove
event, the new point is set so that it stays at the circle outline.
The dragging can also be started by clicking or touching anywhere in the light grey square around the circle.
This is set as the catchElement
in the options of the draggable.
Options
The following options are available:
Name | Type | Description | Default |
---|---|---|---|
axis |
String | Constrains the drag movement along the “x” or “y” axis. | None |
cancel |
Node(s), String | The element(s) that cannot start a drag operation, as Node (collection) or CSS selector within the scope of the element to drag. | None |
catchElement |
Node(s), String | An element that catches all pointer input and moves the draggable to that point. Specified as Node (collection) or CSS selector. | None |
containment |
Node(s), String | Constrains the drag movement inside the specified element, specified as Node (collection) or CSS selector, or the “parent” of the dragged element or the “viewport”. | None |
dragClass |
String, Iterable | CSS classes to add to the element while it’s being dragged. | None |
dragCursor |
String | The mouse cursor to show during dragging. | None |
grid |
Number array | The grid to snap the dragged element to during dragging, as [x, y] in pixels. The grid is aligned at the top left corner of the parent element. |
None |
handle |
Node(s), String | The element(s) that can start a drag operation, as Node (collection) or CSS selector within the scope of the element to drag. | The element to drag |
scroll |
Boolean | Indicates whether the window should scroll to keep the dragged element visible. | false |
stack |
Node(s), String | The elements among which the dragged element will be pulled to the front. Specified as Node (collection) or CSS selector. | None |
Plugin methods
This plugin provides methods to control the draggable.
deinit
deinit()
→ this (Frontfire)
Deinitializes the plugin and removes the draggable features from the elements.
Plugin events
This plugin triggers events for the draggable elements.
draggableend
Triggered when the drag operation has ended. The following methods are provided with the event:
revert()
: Moves the dragged element back to its initial position where it was before dragging it.
draggablemove
Triggered when the dragged element is being moved.
This event can be cancelled by calling event.preventDefault()
to prevent the current movement, but if the element has already been moved, it is usually better to set the event’s newPoint
property to a desired position.
The following properties are provided with the event:
elemRect
: The initial position and size of the dragged element. An object with theleft
,top
,right
,bottom
,width
andheight
properties.newPoint
: The top-left position of the element after applying the movement. An object with theleft
andtop
properties. This property can be set to any other position where the element should be moved instead.
draggablestart
Triggered when the element is starting to be dragged.
This event can be cancelled by calling event.preventDefault()
to prevent the dragging.
The following properties are provided with the event:
dragPoint
: The point where the element was initially touched. An object with theleft
andtop
properties.newPoint
: The current point of the pointer where the dragging should start. An object with theleft
andtop
properties.