Sortable List

Sortable lists is an extension of List View that allows you to sort list view elements.

Let’s look at layout structure of sortable lists in your list views:

Where:

• - “draggable” element (hidden by default) that allows you to sort current list view element

As you may see it is pretty simple, all you need is to add **sortable** class to list block and put **<div class="sortable-handler"></div>** as a direct child of <li>.

If we need to disable sorting on some specific items we can add no-sorting or disallow-sorting class to those items:

<!-- Additional "sortable" class on list block -->
<div class="list sortable">
    <!-- disable sorting for this item -->
    <li class="no-sorting">...</li>
    <!-- sortable items -->
    <li>...</li>
</div>

Note, that it makes sense and work only on first or last items in the list and won’t work correctly if you disable sortable for some of the items in the middle.

Sortable App Methods

app.sortable.enable(listEl)- enable sorting mode on sortable list

• listEl - HTMLElement or string (with CSS Selector). Sortable list block element.

app.sortable.disable(listEl)- disable sorting mode on sortable list

• listEl - HTMLElement or string (with CSS Selector). Sortable list block element.

app.sortable.toggle(listEl)- toggle sorting mode on sortable list

• listEl - HTMLElement or string (with CSS Selector). Sortable list block element.

It is possible to configure global sortable behavior on app initialisation by passing sortable related paremeters under sortable property.

Sortable Events

Sortable will fire the following DOM events on sortable list block element and events on app instance:

App Instance Events

Sortable instance emit events on app instance.

It is possible to enable and disable sortable mode using special classes and data attributes on links:

• To enable sortable mode we need to add **sortable-enable** class to any HTML element (prefered to link)

• To disable sortable mode we need to add **sortable-disable** class to any HTML element (prefered to link)

• To toggle sortable mode we need to add **sortable-toggle** class to any HTML element (prefered to link)

CSS Variables

Below is the list of related (CSS custom properties).

:root {
  --f7-sortable-handler-color: #c7c7cc;
  --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
}
:root .theme-dark,
:root.theme-dark {
  --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
.ios {
  --f7-sortable-handler-width: 35px;
  --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}
.md {
  --f7-sortable-handler-width: 42px;
  --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
}
.aurora {
  --f7-sortable-handler-width: 32px;
  --f7-sortable-sorting-item-box-shadow: var(--f7-elevation-2);
}

var app = new Framework7();
app.on('sortableSort', function (listEl, indexes) {
  console.log(indexes);