可排序列表

可排序列表是一个扩展列表视图它允许你排序列表视图元素。

可排序列表布局

让我们看看列表视图中的可排序列表布局结构：

<!-- Additional "sortable" class on list block -->
<div class="list sortable">
    <li>
        <div class="item-content">
            <div class="item-media">...</div>
            <div class="item-inner">...</div>
        </div>
        <!-- Sortable handler element -->
        <div class="sortable-handler"></div>
    </li>
    ...
</div>

Where:

sortable-handler- "draggable"元素（默认隐藏）允许你排序当前列表视图元素

如你所见，它非常简单，你只需要添加sortable类到列表块，并将<div class="sortable-handler"></div>作为<li>.

禁用排序

如果我们需要在特定项目上禁用排序，我们可以添加no-sorting或disallow-sorting类到这些项目：

<!-- Additional "sortable" class on list block -->
<div class="list sortable">
    <!-- disable sorting for this item -->
    <li class="no-sorting">...</li>

    <!-- sortable items -->
    <li>...</li>
    <li>...</li>
</div>

注意，它只在列表的第一项或最后一项上有效，如果你在中间禁用了一些可排序项目，它将无法正确工作。

相反可排序

如果我们需要在另一侧（例如在LTR方向上的左侧）渲染可排序处理程序，我们需要添加sortable-opposite侧到可排序列表：

<!-- Additional "sortable-opposite" class on sortable list -->
<div class="list sortable sortable-opposite">
  <li>
    <div class="item-content">
      <div class="item-media">...</div>
      <div class="item-inner">...</div>
    </div>
    <!-- Sortable handler element -->
    <div class="sortable-handler"></div>
  </li>
  ...
</div>

可排序应用方法

要在可排序列表上启用/禁用排序模式，我们需要使用以下应用方法：

app.sortable.enable(listEl)- 在可排序列表上启用排序模式

listEl - HTMLElement或字符串（使用CSS选择器）。可排序列表块元素。

app.sortable.disable(listEl)- 在可排序列表上禁用排序模式

listEl - HTMLElement或字符串（使用CSS选择器）。可排序列表块元素。

app.sortable.toggle(listEl)- 在可排序列表上切换排序模式

listEl - HTMLElement或字符串（使用CSS选择器）。可排序列表块元素。

可排序应用参数

通过在sortable属性下传递 swipeout 相关参数来在应用初始化时配置全局 swipeout 行为。

参数类型默认描述

moveElements

布尔值

true

参数	类型	默认	描述
moveElements	布尔值	true	启用时，它将根据新的可排序顺序移动（重新排序）HTML元素。如果你使用其他库进行DOM操作，如React或Vue，则禁用它很有用。也可以通过向列表元素添加`data-sortable-move-elements="true"`或`data-sortable-move-elements="false"`属性来覆盖此行为为特定列表。

启用时，它将根据新的可排序顺序移动（重新排序）HTML元素。如果你使用其他库进行DOM操作，如React或Vue，则禁用它很有用。

也可以通过向列表元素添加data-sortable-move-elements="true"或data-sortable-move-elements="false"属性来覆盖此行为为特定列表。

要更改这些参数，我们需要在应用初始化时在sortable属性下传递它们，例如：

var app = new Framework7({
  sortable: {
    moveElements: false
  }
});

Sortable事件

可排序将在可排序列表块元素和应用程序实例上触发以下DOM事件：

DOM 事件

事件	Target	描述
sortable:enable	可排序列表<div class="list sortable">	当可排序模式启用时，将触发事件
sortable:disable	可排序列表<div class="list sortable">	当可排序模式禁用时，将触发事件
sortable:sort	列表元素<li>	当用户在新的位置释放当前排序元素后，将触发事件。`event.detail`将包含具有排序列表项的起始/新索引号的属性的对象`from`和`to`带有排序列表项的from/to索引数字的属性和`el`带有HTML排序元素的属性
sortable:move	列表元素<li>	事件将在排序过程中每个列表项移动时触发

应用实例事件

可排序实例在应用程序实例上发出事件。

事件	Target	参数	描述
sortableEnable	app	listEl	当可排序模式启用时，将触发事件
sortableDisable	app	listEl	当可排序模式禁用时，将触发事件
sortableSort	app	itemEl, data, listEl	当用户在新的位置释放当前排序元素后，将触发事件。`data`是一个具有`from`和`to`带有排序列表项的from/to索引数字的属性`el`带有HTML排序元素的属性
sortableMove	app	itemEl, listEl	事件将在排序过程中每个列表项移动时触发

可排序点击并保持

可以绕过可排序启用/禁用逻辑，并在项目点击并保持（长按）时使列表项可排序。要使其工作，我们只需要在可排序列表上添加额外的sortable-tap-hold类：

<!-- additional "sortable-tap-hold" class on sortable list -->
<div class="list sortable sortable-tap-hold">
  ...
</div>

在这种情况下，应用程序将依赖于自定义taphold event. To make it work correctly, make sure you have also enabled touch.tapHold: true app 参数

使用链接控制可排序

可以使用特殊类和数据属性在链接上启用和禁用可排序模式：

要启用可排序模式，我们需要添加sortable-enable类
要禁用可排序模式，我们需要添加sortable-disable类
要切换可排序模式，我们需要添加sortable-toggle类
如果你的应用程序中有多个可排序列表，你需要通过在具有所需可排序列表CSS选择器的此HTML元素上的附加data-sortable=".sortable"属性来指定相应的可排序列表

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

.ios {
  --f7-sortable-handler-width: 36px;
  --f7-sortable-sorting-item-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
  --f7-sortable-handler-color: rgba(0, 0, 0, 0.22);
  --f7-sortable-sorting-item-bg-color: rgba(255, 255, 255, 0.8);
}
.ios .dark,
.ios.dark {
  --f7-sortable-sorting-item-bg-color: rgba(50, 50, 50, 0.8);
  --f7-sortable-handler-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-sortable-handler-width: 42px;
  --f7-sortable-sorting-item-box-shadow: none;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-sortable-handler-color: var(--f7-md-on-surface-variant);
  --f7-sortable-sorting-item-bg-color: var(--f7-md-surface-3);
}

示例

sortable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Sortable List</div>
      <div class="right">
        <a class="link sortable-toggle" data-sortable=".sortable">Toggle</a>
      </div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Just click "Toggle" button on navigation bar to enable sorting</p>
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios 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">1 Jenna Smith</div>
              <div class="item-after">CEO</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">2 John Doe</div>
              <div class="item-after">Director</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">3 John Doe</div>
              <div class="item-after">Developer</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">4 Aaron Darling</div>
              <div class="item-after">Manager</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">5 Calvin Johnson</div>
              <div class="item-after">Accounter</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">6 John Smith</div>
              <div class="item-after">SEO</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">7 Chloe</div>
              <div class="item-after">Manager</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
      </ul>
    </div>

    <div class="list list-strong-ios list-outline-ios list-dividers-ios media-list sortable">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Yellow Submarine</div>
                <div class="item-after">$15</div>
              </div>
              <div class="item-subtitle">Beatles</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="80" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Don't Stop Me Now</div>
                <div class="item-after">$22</div>
              </div>
              <div class="item-subtitle">Queen</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80" />
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Billie Jean</div>
                <div class="item-after">$16</div>
              </div>
              <div class="item-subtitle">Michael Jackson</div>
              <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut
                turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit
                amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In
                vel dui laoreet, commodo augue id, pulvinar lacus.</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
      </ul>
    </div>

    <div class="block-title">Opposite Side</div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios sortable sortable-opposite">
      <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">1 Jenna Smith</div>
              <div class="item-after">CEO</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">2 John Doe</div>
              <div class="item-after">Director</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">3 John Doe</div>
              <div class="item-after">Developer</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">4 Aaron Darling</div>
              <div class="item-after">Manager</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">5 Calvin Johnson</div>
              <div class="item-after">Accounter</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">6 John Smith</div>
              <div class="item-after">SEO</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">7 Chloe</div>
              <div class="item-after">Manager</div>
            </div>
          </div>
          <div class="sortable-handler"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

改进此文档

在本页上

可排序列表布局
可排序应用方法
可排序应用参数
Sortable事件

DOM 事件
应用实例事件

可排序点击并保持
使用链接控制可排序
CSS 变量
示例