Frontfire documentation

Draggable plugin

Version 2.1.0

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.

Drag me anywhere (if checked)
Drag me horizontally
Drag me vertically

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.

Drag me within the container
Drag me within my parent

Auto-scrolling

With the scroll option, the page will be scrolled if the element is dragged out of the viewport.

Drag me out of the page to scroll

Reverting

Drag me and I will come back

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.

1. Drag me and I will be at the top
2. Drag me and I will be at the top
3. Drag me and I will be at the top
4. Drag me and I will be at the top
5. Drag me and I will be at the top

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.

Drag me
here
or here
Drag me but not here

Snapping to grid within the container

Drag me with grid snapping
Drag me horizontally with grid

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

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:

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:

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: