,,

Sortable.js，一款神奇的 JavaScript 開源庫？拖拽排序的藝術

admin

2024年10月12日 9:37 本文熱度 906

? Github Star: 29.4K[1]
? 官網[2]

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

sortable.js 是什么？

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

快速開始

安裝

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

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

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

import Sortable from 'sortablejs';

基礎使用

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

效果展示，詳細代碼請回復 “demo”獲取。

進階用法

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

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

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

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

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

與 Dragula.js 相比

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

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