移动端安卓和IOS开发框架Framework7教程-可排序列表（Sortable List）

可排序列表是列表的扩展，可以对列表进行排序.

让我们来看一下可排序列表元素的布局结构：

1. <!-- 加在列表区上额外的“sortable”类 -->
2. <div class="list-block sortable">
3.     <li>
4.         <div class="item-content">
5.             <div class="item-media">...</div>
6.             <div class="item-inner">...</div>
7.         </div>
8.         <!-- 可排序句柄元素 -->
9.         <div class="sortable-handler"></div>
10.     </li>
11. </div>

复制

其中：

• sortable-handler - 可拖拽元素（"draggable" element）（默认隐藏），允许你通过它来调整列表顺序

使列表变成可排序列表视图十分简单，只需要给列表区加上“sortable”类，并在列表元素<li>中加入“sortable-handler”元素作为其直接子元素

开启和关闭排序功能

在拥有可排序列表之后，我们需要某种方法来开启或者关闭排序功能。

通过HTML标签控制

可以通过在链接中设置特定的类和data属性来开启或者关闭排序功能：

• 将"open-sortable"类加入到任意HTML元素中（推荐链接元素），点击该元素实现开启排序功能

• 将"close-sortable"类加入到任意HTML元素中（推荐链接元素），点击该元素实现关闭排序功能

• 将"toggle-sortable"类加入到任意HTML元素中（推荐链接元素），点击该元素实现切换（开启／关闭）排序功能

• 如果在应用中有多个可排序列表，你需要在以上元素中加入data-sortable=".sortable"属性，以CSS选择器对应相应的可排序列表

1. <div class="content-block">
2.     <!-- 我们在data-sortable属性中指定目标可排序列表 -->
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>）且该项目的顺序改变时触发