Mobile Android and IOS Development Framework Framework7 Tutorial - Sortable List

Sortable lists are extensions to lists that can be sorted.

Let's take a look at the layout structure of a sortable list element:

1. <!-- Additional "sortable" class added to the list area -->
2. <divclass="list-block sortable"> 
3.     <li>
4.         <divclass="item-content"> 
5.             <divclass="item-media">...</div> 
6.             <divclass="item-inner">...</div> 
7.         </div>
8.         <!-- Sortable handle element -->
9.         <divclass="sortable-handler"></div> 
10.     </li>
11. </div>

copy

in:

• sortable-handler - "draggable" element (hidden by default) that allows you to adjust the order of the list

Turning a list into a sortable list view is as simple as adding the "sortable" class to the list area and adding the "sortable-handler" element as a direct child of the list element <li>

Turn sorting on and off

After we have a sortable list, we need some way to turn sorting on or off.

Control via HTML tags

Sorting can be turned on or off by setting specific class and data properties in the link:

• Add the "open-sortable" class to any HTML element (recommended link element), click on this element to enable the sorting function

• Add the "close-sortable" class to any HTML element (recommended link element), click on this element to close the sorting function

• Add the "toggle-sortable" class to any HTML element (recommended link element), click on this element to toggle (on/off) the sorting function

• If there are multiple sortable lists in the application, you need to add the data-sortable=".sortable" attribute to the above elements, and use CSS selectors to correspond to the corresponding sortable lists

1. <divclass="content-block"> 
2.     <!-- We specify the target sortable list in the data-sortable attribute -->
3.     <p><a href="#" data-sortable=".sortable" class="open-sortable">Enable sortable</a></p>
4.     <p><a href="#" data-sortable=".sortable" class="close-sortable">Disable sortable</a></p>
5.     <p><a href="#" data-sortable=".sortable" class="toggle-sortable">Toggle sortable</a></p>
6. </div>
7. <!-- 可排序列表 -->
8. <div class="list-block sortable">
9.     <ul>
10.       <li>
11.         <div class="item-content">
12.           <div class="item-media"><i class="icon icon-f7"></i></div>
13.           <div class="item-inner">
14.             <div class="item-title">Item 1</div>
15.             <div class="item-after">$10</div>
16.           </div>
17.         </div>
18.         <!-- 可排序句柄  -->
19.         <div class="sortable-handler"></div>
20.       </li>
21.       <li>
22.         <div class="item-content">
23.           <div class="item-media"><i class="icon icon-f7"></i></div>
24.           <div class="item-inner">
25.             <div class="item-title">Item 2</div>
26.             <div class="item-after">$20</div>
27.           </div>
28.         </div>
29.         <div class="sortable-handler"></div>
30.       </li>
31.       ...
32.     </ul>
33. </div>

复制

实例预览

通过JavaScript控制

可以通过恰当的App方法：

myApp.sortableOpen(sortableContainer) - 在指定的可排序列表开启排序功能

• sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。

myApp.sortableClose(sortableContainer) - 在指定的可排序列表关闭排序功能

• sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。

myApp.sortableToggle(sortableContainer) - 在指定的可排序列表切换（开启／关闭）排序功能

• sortableContainer - 可排序列表的HTML元素或CSS选择器，可选的。如果没有指定，Framework7默认将第一个<div class="list-block sortable">元素作为该方法目标。

1. <p><a href="#" class="open">Enable sortable</a></p>
2. <p><a href="#" class="close">Disable sortable</a></p>
3. <p><a href="#" class="toggle">Toggle sortable</a></p>

复制

 

1. var myApp = new Framework7();
2.  
3. var $$ = Dom7;
4.  
5. $$('.open').on('click', function () {
6.   myApp.sortableOpen('.sortable');
7. });
8. $$('.close').on('click', function () {
9.   myApp.sortableClose('.sortable');
10. });
11. $$('.toggle').on('click', function () {
12.   myApp.sortableToggle('.sortable');
13. });

复制

实例预览

Sortable Events

事件（Event） 目标（Target） 说明（Description）

open	可排序列表<div class="list-block sortable">	当开启排序功能时触发
close	可排序列表<div class="list-block sortable">	当关闭排序功能时触发
sort	列表项目<li>	当用户释放正在排序的列表项目（<li>）且该项目的顺序改变时触发