Sortable
Create sortable grids and lists to rearrange the order of its elements.
Drag and drop an element to a new location within the the sortable grid, while the other items adjust to fit. This is great, if you want to sort items like gallery or menu items, for example.
Usage
To apply this component, add the .f-sortable class to a container and create child elements to define the component. To enable the necessary JavaScript, just add the data-f-sortable attribute.
Example
In this example we used a grid from the Grid component to arrange the sortable items.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
Markup
<ul class="f-sortable" data-f-sortable>
<li>...</li>
<li>...</li>
</ul>Sort any element
The sortable component is not limited to <ul> elements. You can use any block element as a container.
Example
Item 1
Item 2
Item 3
Item 4
Markup
<div class="f-sortable" data-f-sortable>
<div>...</div>
<div>...</div>
</div>Sortable handle
By default, the entire sortable element can be used for drag and drop sorting. To create a handle which will be used instead, just add the {handleClass:'f-sortable-handle'} option to the data attribute and add the handle class to the element that you want to use as a handle.
Example
- drag_handleItem 1
- drag_handleItem 2
- drag_handleItem 3
- drag_handleItem 4
- drag_handleItem 5
- drag_handleItem 6
- drag_handleItem 7
- drag_handleItem 8
- drag_handleItem 9
- drag_handleItem 10
NOTE In this example we used the .fa-bars class from the Icon component to style the handle.
Markup
<ul class="f-sortable" data-f-sortable="{handleClass:'f-sortable-handle'}">
<li><div class="f-sortable-handle"></div>...</li>
</ul>Multiple lists
To be able to sort items from one list to another, you can group them by adding the data-f-sortable="{group:'GROUP-NAME'}" attribute to each list.
Example
First list
Second list
Markup
<ul class="f-sortable" data-f-sortable="{group:'my-group'}">...</ul>
<ul class="f-sortable" data-f-sortable="{group:'my-group'}">...</ul>JavaScript options
This is an example of how to set options through the data attribute:
<div data-f-sortable="{animation:0, dragCustomClass:'dragging'}">...| Option | Possible value | Default | Description |
|---|---|---|---|
group |
string | false | List group |
animation |
integer | 150 | Animation speed in ms |
threshold |
integer | 10 | Mouse movement threshold in pixel until trigger element dragging |
handleClass |
string | false | CSS selector to define elements which can trigger sorting |
dragCustomClass |
string | empty string | Custom class added to the dragged element |
childClass |
string | f-sortable-item | editable class name |
placeholderClass |
string | f-sortable-placeholder | editable class name |
overClass |
string | f-sortable-over | editable class name |
draggingClass |
string | f-sortable-dragged | editable class name |
dragMovingClass |
string | f-sortable-moving | editable class name |
baseClass |
string | f-sortable | editable class name |
noDragClass |
string | f-sortable-nodrag | editable class name |
emptyClass |
string | f-sortable-empty | editable class name |
stop |
function | empty function | shortcut to override function |
start |
function | empty function | shortcut to override function |
change |
function | empty function | shortcut to override function |
Init element manually
let sortable = FatKit.sortable(element, { /* options */ });Events
| Name | Parameter | Description |
|---|---|---|
start.f.sortable |
event, sortable object, dragged element, ghost element | On sortable drag start |
move.f.sortable |
event, sortable object | On sortable move item |
stop.f.sortable |
event, sortable object, dragged element | On sortable stop dragging |
change.f.sortable |
event, sortable object, dragged element | On sortable change item |
