• ? Github Star: 29.4K[1]

• ? 官網(wǎng)[2]

用戶交互的豐富性和直觀性能給用戶帶來不一樣的使用體驗。Sortable.js 作為一個輕量級且功能強(qiáng)大的 JavaScript 庫，為我們提供了一種簡單而有效的方式來實現(xiàn)拖拽排序功能。無論是列表、網(wǎng)格還是復(fù)雜的布局，Sortable.js 都能輕松應(yīng)對。

sortable.js 是什么？

Sortable.js 是一個 JavaScript 開源的，無需依賴的現(xiàn)代瀏覽器拖拽庫。它支持觸摸設(shè)備，并且可以在 IE9 及以上版本中運行。通過其簡潔的API和豐富的配置選項，Sortable.js能夠輕松集成到任何項目中，無論是 React、Vue 還是 Angular，都能與之無縫配合。

快速開始

安裝

通過 npm 或 yarn 安裝 Sortable.js 非常簡單：

npm install sortablejs --save
# 或者
yarn add sortablejs

在項目中引入 Sortable.js ，可以通過直接在 HTML 文件中添加 script 標(biāo)簽，或者在模塊化項目中使用 import 語句：

import Sortable from 'sortablejs';

基礎(chǔ)使用

Sortable.js 的使用非常直觀。以下是一個基本的示例，展示了如何使一個列表可拖拽：

<div class="container">
  <h1>Sortable List</h1>
  <ul id="sortable-list" class="sortable-list">
    <li class="sortable-item">Drag me 1</li>
    <li class="sortable-item">Drag me 2</li>
    <li class="sortable-item">Drag me 3</li>
    <li class="sortable-item">Drag me 4</li>
    <li class="sortable-item">Drag me 5</li>
  </ul>
</div>

document.addEventListener('DOMContentLoaded', function() {
    var el = document.getElementById('sortable-list');
    var sortable = Sortable.create(el, {
        animation: 150,
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen'
    });
});

效果展示，詳細(xì)代碼請回復(fù) “demo”獲取。

進(jìn)階用法

Sortable.js 的強(qiáng)大之處在于其豐富的配置選項和事件處理。例如，你可以設(shè)置拖拽手柄、過濾不可拖拽的元素、設(shè)置拖拽閾值等：

new Sortable(document.getElementById('example-list'), {
  handle: '.handle', // 指定拖拽手柄
  filter: '.filtered', // 過濾不可拖拽的元素
  threshold: 10, // 設(shè)置拖拽閾值
  onEnd: function(evt) {
    console.log('拖拽結(jié)束', evt);
  }
});

假設(shè)我們需要在一個任務(wù)管理器中實現(xiàn)任務(wù)的拖拽排序。我們可以使用Sortable.js來輕松實現(xiàn)這一功能：

<ul id="task-list">
  <li class="task">任務(wù) 1</li>
  <li class="task">任務(wù) 2</li>
  <li class="task">任務(wù) 3</li>
</ul>

new Sortable(document.getElementById('task-list'), {
  animation: 150,
  onEnd: function(evt) {
    // 任務(wù)拖拽結(jié)束后的邏輯處理
    console.log('任務(wù)排序已更新');
  }
});

與 Dragula.js 相比

Sortable.js 和 Dragula.js 都是非常流行的 JavaScript 庫，用于實現(xiàn)拖拽功能，但它們各有特點和適用場景。如果需要一個功能豐富、動畫效果流暢且與現(xiàn)代前端框架兼容的拖拽庫，Sortable.js 是一個不錯的選擇。而如果項目需要快速實現(xiàn)簡單的拖拽功能，且需要兼容舊瀏覽器，Dragula.js 可能更適合。

想了解可以查看上期文章：Dragula.js

總結(jié)

Sortable.js 是一個功能強(qiáng)大且靈活的拖拽排序庫，不僅可以用于簡單的列表排序，還能處理更復(fù)雜的場景，如多級嵌套排序和多列表協(xié)同操作。通過其豐富的 API 和事件系統(tǒng)，可以輕松實現(xiàn)高度定制化的拖拽排序功能。

無論是用于提升數(shù)據(jù)表的交互性，還是實現(xiàn)一個動態(tài)的圖片畫廊，Sortable.js 都是一個值得嘗試的工具。通過上述介紹和示例，希望你能在項目中靈活運用 Sortable.js，創(chuàng)造出更加豐富和直觀的用戶界面。

祝好！

引用鏈接

[1] Github Star: 29.4K: https://github.com/SortableJS/Sortable
[2] 官網(wǎng): https://sortablejs.github.io/Sortable/