可排序清單

可排序清單是清單檢視的延伸，可讓您對清單檢視元素進行排序。

可排序清單配置

我們來看看清單檢視中可排序清單的配置結構

<!-- 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-handler - 「可拖曳」元素（預設為隱藏），可讓您對目前的清單檢視元素進行排序

您可能看到它相當簡單，您只需要將 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

布林值

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

可排序事件

可排序功能會在可排序清單區塊元素和應用程式執行個體上觸發下列 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>	在排序期間，將在每個清單項目移動時觸發事件

應用程式執行個體事件

可排序執行個體在應用程式執行個體上發出事件。

事件	目標	引數	說明
sortableEnable	app	listEl	當可排序模式啟用時，將觸發事件
sortableDisable	app	listEl	當可排序模式停用時，將觸發事件
sortableSort	app	itemEl、data、listEl	當使用者將目前正在排序的元素釋放到新位置後，將觸發事件。`data` 是包含 `from` 和 `to` 屬性的物件，其中 `from` 和 `to` 是已排序清單項目索引號碼，以及包含 HTML 已排序元素的 `el` 屬性
sortableMove	app	itemEl、listEl	在排序期間，將在每個清單項目移動時觸發事件

可排序點選並按住

可以繞過可排序啟用/停用邏輯，並在項目點選並按住（長按）時，讓清單項目可排序。若要讓它運作，我們只需要在可排序清單上新增 sortable-tap-hold 類別

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

在這種情況下，應用程式將依賴自訂 taphold 事件。若要讓它正確運作，請務必也啟用 touch.tapHold: true 應用程式參數

使用連結控制可排序

可以使用連結上的特殊類別和資料屬性，來啟用和停用可排序模式

若要啟用可排序模式，我們需要將 sortable-enable 類別新增至任何 HTML 元素（建議連結）
若要停用可排序模式，我們需要將 sortable-disable 類別新增至任何 HTML 元素（建議連結）
若要切換可排序模式，我們需要將 sortable-toggle 類別新增至任何 HTML 元素（建議連結）
如果應用程式中有多個可排序清單，您需要透過此 HTML 元素上的額外 data-sortable=".sortable" 屬性，指定適當的可排序清單，其中包含所需可排序清單的 CSS 選擇器

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>

改善此文件

在此頁面上

可排序清單配置
可排序應用程式方法
可排序應用程式參數
可排序事件

DOM 事件
應用程式執行個體事件

可排序點選並按住
使用連結控制可排序
CSS 變數
範例