可排序列表（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>

开启和关闭排序功能

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

通过HTML标签控制

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

<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');
});

实例预览