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

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 the left, top, right, bottom, width and height properties.
newPoint: The top-left position of the element after applying the movement. An object with the left and top 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 the left and top properties.
newPoint: The current point of the pointer where the dragging should start. An object with the left and top properties.