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 elementAs 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>
After we have our sortable list we need somehow to enable/disable it.
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>
It is possible using appropriate App methods:
myApp.sortableOpen(sortableContainer) - enable "sorting" mode on specified sortable container
myApp.sortableClose(sortableContainer) - disable "sorting" mode on specified sortable container
myApp.sortableToggle(sortableContainer) - toggle "sorting" mode on specified sortable container
<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');
});
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 |