赞助商成为赞助商

可排序列表

可排序列表是 列表视图 的扩展，支持对列表视图元素进行排序。

可排序列表布局

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

<!-- 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>

位置

您可能发现它很简单，您需要做的就是向列表块添加 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 或 string（带 CSS 选择器）。可排序列表块元素。

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

  • listEl - HTMLElement 或 string（带 CSS 选择器）。可排序列表块元素。

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

  • listEl - HTMLElement 或 string（带 CSS 选择器）。可排序列表块元素。

可排序应用程序参数

通过在 sortable 属性下传递与可排序相关的参数，可以在应用程序初始化时配置全局可排序行为。

参数类型默认值描述
moveElements布尔真

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

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

若要更改这些参数，我们需要在 sortable 属性下的应用程序初始化中传递它们，例如

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

可排序事件

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

DOM 事件

事件目标描述
sortable:enable可排序列表<div class="list sortable">启用可排序模式时将触发此事件
sortable:disable可排序列表<div class="list sortable">禁用可排序模式时将触发此事件
sortable:sort列表元素<li>用户释放当前正在新位置排序的元素后，将触发此事件。event.detail 将包含一个对象，其中包含 from 和 to 属性，它们分别表示已排序列表项的 from 和 to 索引号，以及包含已排序 HTML 元素的 el 属性
sortable:move列表元素<li>对排序期间的每个列表项移动触发此事件

应用程序实例事件

Sortable 实例会在应用实例上发出事件。

事件目标参数描述
sortableEnable应用列表元素启用可排序模式时将触发此事件
sortableDisable应用列表元素禁用可排序模式时将触发此事件
sortableSort应用项目元素、数据、列表元素用户在新的位置释放当前排序元素后，将触发事件。data 是一个对象，包含属性 from 和 to，其中包含被排序列表项的起始/结束索引编号，el 属性带有排序的 HTML 元素
sortableMove应用项目元素、列表元素对排序期间的每个列表项移动触发此事件

可排序按压操作

可以绕过可排序启用/禁用逻辑，并通过按压项目项目（长按）对列表项进行排序。要使其工作，我们只需在可排序列表上添加一个额外的 sortable-tap-hold 类

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

在这种情况下，应用程序将依赖于自定义 taphold 事件。为使其正常工作，请确保还启用了 touch.tapHold: true 应用参数

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

  • 要启用可排序模式，我们需要向任何 HTML 元素（最好是链接）添加 sortable-enable 类

  • 要禁用可排序模式，我们需要向任何 HTML 元素（最好是链接）添加 sortable-disable 类

  • 要切换可排序模式，我们需要向任何 HTML 元素（最好是链接）添加 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>
改善此文档
在此页面