可排序列表（Sortable List）

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

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

<!-- 加在列表区上额外的“sortable”类 -->
<div class="list-block sortable">
    <li>
        <div class="item-content">
  <div class="item-media">...</div>
  <div class="item-inner">...</div>
        </div>
        <!-- 可排序句柄元素 -->
        <div class="sortable-handler"></div>
    </li>
</div>

其中：

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

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

开启和关闭排序功能

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

通过HTML标签控制

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

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

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

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

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

<div class="content-block">
    <!-- 我们在data-sortable属性中指定目标可排序列表 -->
    <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>
<!-- 可排序列表 -->
<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>
        <!-- 可排序句柄  -->
        <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>

通过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">元素作为该方法目标。

<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