JavaScript Sortable 是一個用于對列表進行排序的輕量級 JavaScript 庫。它非常靈活，可以處理各種布局，包括復雜布局。通過使用 Sortable 的多種配置選項和事件回調，您可以實現高度定制化的排序功能。

以下是一些使用 Sortable 處理復雜布局的示例：

1. 使用嵌套列表：

<ul class="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul class="sortable">
      <li>Subitem 3.1</li>
      <li>Subitem 3.2</li>
    </ul>
  </li>
</ul>

new Sortable(document.querySelector('.sortable'), {
  nested: true,
});

2. 使用網格布局：

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

new Sortable(document.querySelector('.grid'), {
  grid: true,
});

3. 使用可排序的卡片布局：

<div class="cards">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
  <div class="card">Item 4</div>
</div>

.cards {
  display: flex;
  flex-wrap: wrap;
}

.card {
  min-width: 100px;
  padding: 16px;
  margin: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

new Sortable(document.querySelector('.cards'), {
  card: true,
});

這些示例展示了如何使用 Sortable 處理不同類型的復雜布局。您可以根據需要調整配置選項和事件回調，以實現所需的排序功能。更多關于 Sortable 的信息和示例，請參閱官方文檔：https://sortablejs.github.io/Sortable/