Sortable List

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

Let's look on layout structure of sortable lists in your list views:

<!-- Additional "sortable" class on list-block -->
<div class="list-block sortable">
    <li>
        <div class="item-content">
            <div class="item-media">...</div>
            <div class="item-inner">...</div>
        </div>
        <!-- Sortable handler element -->
        <div class="sortable-handler"></div>
    </li>
</div> 

Where:

  • sortable-handler - "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 "sortable-handler" as a direct child of <li>

Enable and diable Sortable

After we have our sortable list we need somehow to enable/disable it.

From HTML

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 "open-sortable" class to any HTML element (prefered to link)

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

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

  • If you have more than one sortable list in app, you need to specify appropriate sortable list via additional data-sortable=".sortable" attribute on this HTML element with CSS selector of required sortable list

<div class="content-block">
    <!-- We specify target sortable list in data-sortable attribute  -->
    <p><a href="#" data-sortable=".sortable" class="open-sortable">Enable sortable</a></p>
    <p><a href="#" data-sortable=".sortable" class="close-sortable">Disable sortable</a></p>
    <p><a href="#" data-sortable=".sortable" class="toggle-sortable">Toggle sortable</a></p>
</div>
<!-- Sortable list  -->
<div class="list-block sortable">
    <ul>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Item 1</div>
            <div class="item-after">$10</div>
          </div>
        </div>
        <!-- Sortable handler  -->
        <div class="sortable-handler"></div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-f7"></i></div>
          <div class="item-inner">
            <div class="item-title">Item 2</div>
            <div class="item-after">$20</div>
          </div>
        </div>
        <div class="sortable-handler"></div>
      </li>
      ...
    </ul>
</div>

Using JavaScript

It is possible using appropriate App methods:

myApp.sortableOpen(sortableContainer) - enable "sorting" mode on specified sortable container

  • sortableContainer - HTMLElement or string (with CSS Selector) of sortable container (<div class="list-block sortable">). Optional. If not specified, Framework7 will try to find first <div class="list-block sortable"> element.

myApp.sortableClose(sortableContainer) - disable "sorting" mode on specified sortable container

  • sortableContainer - HTMLElement or string (with CSS Selector) of sortable container (<div class="list-block sortable">). Optional. If not specified, Framework7 will try to find first <div class="list-block sortable"> element.

myApp.sortableToggle(sortableContainer) - toggle "sorting" mode on specified sortable container

  • sortableContainer - HTMLElement or string (with CSS Selector) of sortable container (<div class="list-block sortable">). Optional. If not specified, Framework7 will try to find first <div class="list-block sortable"> element.
<p><a href="#" class="open">Enable sortable</a></p>
<p><a href="#" class="close">Disable sortable</a></p>
<p><a href="#" class="toggle">Toggle sortable</a></p>          
var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.open').on('click', function () {
  myApp.sortableOpen('.sortable');
});
$$('.close').on('click', function () {
  myApp.sortableClose('.sortable');
});
$$('.toggle').on('click', function () {
  myApp.sortableToggle('.sortable');
});

Sortable Events

Event Target Description
sortable:open Sortable Container<div class="list-block sortable"> Event will be triggered when sortable mode is enabled
sortable:close Sortable Container<div class="list-block sortable"> Event will be triggered when sortable mode is disabled
sortable:sort List view element<li> Event will be triggered after user release currently sorting element in new position. event.detail will contain object with startIndex and newIndex properties with start/new index numbers of sorted list item