Sortable plugin
Frontfire UI allows sorting elements within their parent by mouse, touch or other pointer interaction.
This plugin is available in the Minimal and Complete bundles.
This plugin depends on the plugins: draggable
Description
When adding the sortable feature to an element with the sortable CSS class, or by calling the sortable() plugin method, all of its children can be reordered within the parent by picking and move a child element to another position.
The sorting and movement can be constrained by providing options to that method or handling events.
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.
Vertical layout
List items
In a vertical layout, children can be sorted in the vertical direction. The following example demonstrates this with an unordered list.
Items can be added and removed with any DOM method at any time without further considerations.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8 extra text
List items with sort handles
The following example shows how list items can only be sorted when using the handle at the right end. This allows scrolling the page normally on touch screens.
- Item 1 sort
- Item 2 sort
- Item 3 sort
- Item 4 sort
- Item 5 sort
- Item 6 sort
- Item 7 sort
- Item 8 sort
Table body rows
To prevent the table header or footer to be sorted, the sortable feature should only be applied to the <tbody> element.
All of its children, the table body rows, will be sortable without restrictions.
| Column A | Column B | Column C | Column D |
|---|---|---|---|
| A1 Text | B1 | C1 | D1 |
| A2 | B2 Text | C2 | D2 |
| A3 | B3 | C3 Text | D3 |
| A4 | B4 | C4 | D4 very long text with more words |
| A5 | B5 | C5 | D5 |
Horizontal layout
The sort orientation (vertical or horizontal) is determined from the first child element.
For block-display elements, the orientation is vertical; otherwise, it is horizontal.
The elements in the following example are set as display: inline-block by CSS.
If the sortable element is empty, this decision will be deferred until the first child is added.
Regular grid layout
The items in this example are set to a constant width by CSS. This makes them appear as a regular grid.
Irregular grid layout
The following example works like the one above where you can add new items. It already has many items of different size added to better demonstrate the line wrapping.
Using events
Events can be used to react on sort actions and cancel any of them. See the description of events below.
No event yet
Nested sortables
Sortable elements can also be nested. Each child element can only be sorted among the other siblings of the same parent. The parent element itself can be sorted by dragging it in all areas that are not covered by a sortable child. If no such non-overlapping areas exist, you can use drag handles for each element, as shown above.
-
A
- A1
- A2
- A3
- A4
-
B
- B1
- B2
- B3
- B4
-
C
- C1
- C2
- C3
- C4
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 |
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 |
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, Boolean | The elements among which the dragged element will be pulled to the front. Specified as Node (collection) or CSS selector. true to stack all sortable children. | None |
Plugin methods
This plugin provides methods to control the sortable.
deinit
deinit()→ this (Frontfire)
Deinitializes the plugin and removes the sortable features from the elements.
Plugin events
This plugin triggers events for the sortable elements.
sortablechange
Triggered for the sorted child while it is being moved and when a new drop position is selected.
This event can be cancelled by calling event.preventDefault() to prevent the new placement.
The following properties are provided with the event:
after: The other child element that this element was sorted after. If unset, it was moved at the start.
sortableend
Triggered for the sorted child when the sort operation has ended.
This event can be cancelled by calling event.preventDefault() to prevent the new placement.
The following properties are provided with the event:
after: The other child element that this element was sorted after. If unset, it was moved at the start.initialIndex: The index of the sorted child before it was moved.newIndex: The index of the sorted child after moving it.
sortablemove
Triggered for the sorted child element when it is being moved.
This event can be cancelled by calling event.preventDefault() to prevent the current movement.
sortablestart
Triggered for a child element when it is starting to be sorted.
This event can be cancelled by calling event.preventDefault() to prevent the sorting.