语言: 英文中文

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

事件(Event) 目标(Target) 说明(Description)
open 可排序列表<div class="list-block sortable"> 当开启排序功能时触发
close 可排序列表<div class="list-block sortable"> 当关闭排序功能时触发
sort 列表项目<li> 当用户释放正在排序的列表项目(<li>)且该项目的顺序改变时触发