Sortable.js：可排序列表的實現

Sortable.js是一個簡單易用的JavaScript庫，它允許我們實現可排序列表功能。無論是拖動條目，改變條目順序還是對列表進行排序，Sortable.js都可以輕鬆處理。

一、基本使用

首先，我們需要引入Sortable.js庫文件到我們的項目中：

<script src="path/to/sortable.js"></script>

接下來，創建一個簡單的可排序列表。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

在JavaScript代碼中，我們可以這樣初始化我們的技能列表：

var myList = document.getElementById('myList');
new Sortable(myList);

上面的代碼將創建一個Sortable.js實例，並將它應用到id為“myList”的ul元素上。現在，我們就可以通過拖動我們的列表項來改變它們的順序了。

二、配置選項

Sortable.js提供了許多配置選項，使我們能夠對拖動、排序和動畫等行為進行自定義。

1. 支持排序的元素

我們可以使用draggable類指定可排序的元素。默認情況下，Sortable.js將可拖動元素的子元素識別為可排序元素。例如，以下代碼將為li元素啟用拖放功能：

<ul id="myList">
  <li><span class="draggable">Item 1</span></li>
  <li><span class="draggable">Item 2</span></li>
  <li><span class="draggable">Item 3</span></li>
</ul>

在初始化Sortable實例時，我們需要使用draggable選項指定可拖動的元素類：

var myList = document.getElementById('myList');
new Sortable(myList, {
  draggable: '.draggable'
});

2. 排序方式

我們可以使用direction選項設置列表的排序方式。默認情況下，Sortable.js將列表項從上到下排序。以下代碼將使列表項從左到右排列：

<ul id="myList">
  <li><span class="draggable">Item 1</span></li>
  <li><span class="draggable">Item 2</span></li>
  <li><span class="draggable">Item 3</span></li>
</ul>

var myList = document.getElementById('myList');
new Sortable(myList, {
  draggable: '.draggable',
  direction: 'horizontal'
});

3. 拖動和排序的限制

我們可以使用handle選項設置拖拽手柄，以控制哪些部分可以被拖拽。

<ul id="myList">
  <li><span class="drag-handle"><i class="fa fa-bars"></i></span> Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

var myList = document.getElementById('myList');
new Sortable(myList, {
  handle: '.drag-handle'
});

我們還可以使用group選項將多個列表組合在一起，並定義哪些列表可以同時拖動。

<ul id="list1" class="connected-sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="list2" class="connected-sortable">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

new Sortable(document.getElementById('list1'), {
  group: 'shared'
});

new Sortable(document.getElementById('list2'), {
  group: 'shared'
});

4. 動畫效果

我們可以使用animation選項啟用列表項移動的動畫效果。默認情況下，Sortable.js會降低列表項的不透明度來表示它們正在移動。

var myList = document.getElementById('myList');
new Sortable(myList, {
  animation: 150
});

三、事件處理

Sortable.js還提供了各種事件，可以用於在排序過程中響應用戶的交互。

1. Sortable.js事件列表

Sortable.js提供了幾個事件，可以用於管理拖放過程。下面是部分事件列表：

2. 事件處理實例

我們可以使用這些事件處理拖動和排序過程中的各種行為。

var myList = document.getElementById('myList');
new Sortable(myList, {
  onMove: function (evt) {
    // 只允許拖動li元素
    var element = evt.related;
    return element.tagName === 'LI';
  },
  onEnd: function (evt) {
    // 操作完成後發送Ajax請求
    var order = Sortable.toArray(myList);
    $.ajax({
      url: '/save-order',
      type: 'POST',
      data: {order: order},
      dataType: 'json'
    });
  }
});

上面的代碼使用了onMove和onEnd事件，分別用於控制拖動操作和完成操作後的後續處理。

四、總結

遵循上述方法，我們可以很容易地實現一個可排序的列表，並在拖動和排序過程中觸發各種事件來響應用戶的行為。Sortable.js作為一個非常流行和易於使用的排序庫，可以廣泛應用於各種Web應用程序中，提高用戶體驗。