首頁手記 Sortable.js項目實戰：輕松入門教程

Sortable.js項目實戰：輕松入門教程

標簽：

JavaScript 前端工具開源

概述

本文详细介绍了Sortable.js项目实战，包括如何引入和初始化Sortable.js，实现基本的拖动排序功能，以及如何配置和使用各种事件和选项。文章还提供了多个实际应用案例，帮助读者更好地理解和应用Sortable.js。

介绍Sortable.js

Sortable.js 是一个轻量级的 JavaScript 库，用于实现可拖动排序的功能。它支持多种输入方式，如鼠标、触摸屏和键盘，并且兼容大多数现代浏览器。Sortable.js 可用于各类排序需求，如列表、网格、树形结构等。

什么是Sortable.js

Sortable.js 提供了一种简单易用的方式来处理可拖动排序的列表项。它允许用户通过拖动列表中的项目来重新排列它们的顺序，为用户提供了一种直观且交互性强的方式来操作数据。此外，Sortable.js 还支持多种自定义配置选项，使得开发者可以根据具体需求进行灵活调整。

Sortable.js的基本功能与用途

Sortable.js 的主要功能包括：

拖动排序：允许用户通过拖动列表项来重新排序。
自定义事件：支持多种自定义事件回调，如 onStart, onEnd, onSort 等，开发者可以在这些事件中执行自定义逻辑。
多种输入方式：支持鼠标、触摸屏和键盘输入。
动画效果：提供多种动画效果以增强用户体验。
自定义样式：允许开发者自定义列表项的样式和布局。

如何引入Sortable.js

要使用 Sortable.js，首先需要将其引入到项目中。可以通过 CDN 引入或下载源码并添加到项目中。以下是通过 CDN 引入的方法：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
</head>
<body>
    <ul id="my-list">
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('my-list'), {
            // 配置选项
        });
    </script>
</body>
</html>

通过上述方法，您可以成功引入 Sortable.js 并初始化一个可拖动排序的列表。

快速上手

初始化Sortable.js的基本方法

初始化 Sortable.js 的基本方法如下：

var sortable = new Sortable(document.getElementById('my-list'), {
    // 配置选项
});

这里，document.getElementById('my-list') 表示要排序的列表元素，Sortable 是 Sortable.js 提供的构造函数。Sortable 构造函数接受两个参数：一个是需要排序的元素，另一个是配置对象。配置对象可以包含多个选项，用于自定义排序行为。

如何让列表项可拖拽排序

要让列表中的项可拖动排序，首先需要确保每个列表项具有唯一的标识符，并且这些项可以被拖动。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
</head>
<body>
    <ul id="my-list">
        <li class="list-item">项目1</li>
        <li class="list-item">项目2</li>
        <li class="list-item">项目3</li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('my-list'), {
            draggable: '.list-item' // 可拖动的元素类名
        });
    </script>
</body>
</html>

在这个示例中，我们通过设置 draggable 选项来指定哪些元素是可拖动的。在这种情况下，我们设置为 .list-item 类的元素。

如何自定义排序事件

Sortable.js 提供了多种事件回调函数，允许开发者在不同阶段执行自定义逻辑。以下是一些常用的事件：

onStart: 当拖动开始时触发。
onEnd: 当拖动结束时触发。
onSort: 当排序完成时触发。

例如，我们可以在 onSort 事件中执行一些特定的操作：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
</head>
<body>
    <ul id="my-list">
        <li class="list-item">项目1</li>
        <li class="list-item">项目2</li>
        <li class="list-item">项目3</li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('my-list'), {
            draggable: '.list-item',
            onSort: function (event) {
                console.log('排序完成', event);
            }
        });
    </script>
</body>
</html>

在这个示例中，onSort 事件会在每次拖动结束且排序完成后被触发。通过这种方式，您可以根据排序状态执行特定的逻辑操作。

常用配置选项

解释常用配置项的作用

Sortable.js 提供了许多配置选项来满足不同的需求。以下是一些常用的配置项及其作用：

draggable: 指定哪些元素是可拖动的。
group: 设置元素所属的拖拽组，使得不同组之间的元素可以互相拖动。
store: 使用服务器端存储排序状态。
ghostClass: 设置拖动时显示的元素样式。
onStart: 当拖动开始时触发的回调函数。
onEnd: 当拖动结束时触发的回调函数。
onSort: 当排序完成时触发的回调函数。

如何设置列表项的拖拽限制

Sortable.js 提供了 onMove 选项，可以用来限制哪些元素可以被拖动到其他位置。例如，我们可以通过 onMove 选项来禁止特定类别的元素被拖动到某个位置：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
</head>
<body>
    <ul id="my-list">
        <li class="list-item">项目1</li>
        <li class="list-item">项目2</li>
        <li class="list-item">项目3</li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('my-list'), {
            draggable: '.list-item',
            onMove: function (dragEl, parentEl, childEl, targetEl, newIndex, oldIndex) {
                if (targetEl.classList.contains('restricted')) {
                    return false; // 禁止拖动到带有 restricted 类的元素
                }
                return true;
            }
        });
    </script>
</body>
</html>

在这个示例中，我们通过 onMove 选项来检查目标元素是否包含 restricted 类。如果包含，则禁止拖动到该位置。

如何控制拖拽的动画效果

Sortable.js 提供了多种动画效果选项，可以通过 onDrag 和 onMove 事件来控制拖动动画。以下是一个示例，展示了如何通过 onMove 事件来改变拖动元素的样式：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
    <style>
        .ghost {
            opacity: 0.5;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body>
    <ul id="my-list">
        <li class="list-item">项目1</li>
        <li class="list-item">项目2</li>
        <li class="list-item">项目3</li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('my-list'), {
            draggable: '.list-item',
            onMove: function (el, containerEl) {
                el.classList.add('ghost');
            },
            onEnd: function (event) {
                event.item.classList.remove('ghost');
            }
        });
    </script>
</body>
</html>

在这个示例中，我们通过 onMove 事件将拖动的元素添加了一个 ghost 类，用于改变其样式。当拖动结束时，通过 onEnd 事件移除 ghost 类。

实际应用案例

实例1：创建一个简单的拖拽列表

下面是一个简单的拖拽列表的示例：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
</head>
<body>
    <ul id="my-list">
        <li class="list-item">项目1</li>
        <li class="list-item">项目2</li>
        <li class="list-item">项目3</li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('my-list'), {
            draggable: '.list-item'
        });
    </script>
</body>
</html>

实例2：实现可排序的文件夹结构

假设我们有一个文件夹结构，每个文件夹包含多个项目，我们希望用户可以拖动文件夹中的项目来重新排序。可以使用 Sortable.js 来实现这个功能：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
</head>
<body>
    <div id="folder1">
        <h3>文件夹1</h3>
        <ul id="folder1-list">
            <li class="list-item">项目1-1</li>
            <li class="list-item">项目1-2</li>
            <li class="list-item">项目1-3</li>
        </ul>
    </div>
    <div id="folder2">
        <h3>文件夹2</h3>
        <ul id="folder2-list">
            <li class="list-item">项目2-1</li>
            <li class="list-item">项目2-2</li>
            <li class="list-item">项目2-3</li>
        </ul>
    </div>
    <button id="add-folder1">添加项目到文件夹1</button>
    <button id="remove-folder1">移除项目从文件夹1</button>
    <button id="add-folder2">添加项目到文件夹2</button>
    <button id="remove-folder2">移除项目从文件夹2</button>
    <script>
        var folder1Sortable = new Sortable(document.getElementById('folder1-list'), {
            draggable: '.list-item'
        });
        var folder2Sortable = new Sortable(document.getElementById('folder2-list'), {
            draggable: '.list-item'
        });

        function addNewItem(folderId) {
            var newItem = document.createElement('li');
            newItem.className = 'list-item';
            newItem.textContent = '新项目';
            document.getElementById(folderId + '-list').appendChild(newItem);
            if (folderId === 'folder1') {
                folder1Sortable.append(newItem);
            } else if (folderId === 'folder2') {
                folder2Sortable.append(newItem);
            }
        }

        function removeItem(folderId, index) {
            var item = document.querySelectorAll('.' + folderId + '-list .list-item')[index];
            if (item) {
                item.remove();
                if (folderId === 'folder1') {
                    folder1Sortable.remove(item);
                } else if (folderId === 'folder2') {
                    folder2Sortable.remove(item);
                }
            }
        }

        document.getElementById('add-folder1').onclick = function() {
            addNewItem('folder1');
        };
        document.getElementById('remove-folder1').onclick = function() {
            removeItem('folder1', 0);
        };
        document.getElementById('add-folder2').onclick = function() {
            addNewItem('folder2');
        };
        document.getElementById('remove-folder2').onclick = function() {
            removeItem('folder2', 0);
        };
    </script>
</body>
</html>

在这个示例中，我们为每个文件夹创建了一个独立的 Sortable 实例，使得用户可以分别在每个文件夹中拖动项目来重新排序。同时，添加了按钮用于动态添加和删除项目。

实例3：动态添加或删除列表项时的处理

假设我们需要动态地添加或删除列表项，同时保持拖动排序功能。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable.js 实战教程</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.js"></script>
</head>
<body>
    <ul id="my-list">
        <li class="list-item">项目1</li>
        <li class="list-item">项目2</li>
        <li class="list-item">项目3</li>
    </ul>
    <button id="add-button">添加项目</button>
    <button id="remove-button">移除项目</button>
    <script>
        var sortable = new Sortable(document.getElementById('my-list'), {
            draggable: '.list-item'
        });

        function addNewItem() {
            var newItem = document.createElement('li');
            newItem.className = 'list-item';
            newItem.textContent = '新项目';
            document.getElementById('my-list').appendChild(newItem);
            sortable.append(newItem);
        }

        function removeItem(index) {
            var item = document.querySelectorAll('.list-item')[index];
            if (item) {
                item.remove();
                sortable.remove(item);
            }
        }

        document.getElementById('add-button').onclick = addNewItem;
        document.getElementById('remove-button').onclick = function() {
            removeItem(0); // 移除第一个元素
        };
    </script>
</body>
</html>

在这个示例中，我们通过 sortable.append 和 sortable.remove 方法动态地添加和删除列表项，并保持 Sortable 实例的有效性。

调试与问题解决

常见问题与解决方案

在使用 Sortable.js 时，可能会遇到一些常见问题。以下是一些常见问题及其解决方案：

元素没有响应拖动操作：请检查是否有其他 JavaScript 代码阻止了元素的拖动。确保 draggable 选项正确设置。
排序不生效：检查是否正确配置了 onSort 事件，并确保在事件中没有阻止排序的操作。
浏览器兼容性问题：确保引入的 Sortable.js 版本与浏览器兼容，可以尝试使用最新的版本。

如何调试Sortable.js相关的问题

调试 Sortable.js 问题时，可以使用浏览器的开发者工具来监控事件和日志输出。以下是一些调试方法：

检查控制台日志：在浏览器开发者工具的控制台中查看是否有错误信息。
监听事件：在 onStart, onMove, onEnd, onSort 等事件中添加 console.log 输出，检查事件触发情况。
使用断点：设置断点来逐步检查代码执行过程，确保代码按预期执行。

浏览器兼容性注意事项

Sortable.js 通常兼容大多数现代浏览器，但某些旧版本的浏览器可能存在问题。确保使用最新版本的 Sortable.js，并在所有目标浏览器上进行测试。如果遇到兼容性问题，可以查阅 Sortable.js 的官方文档或社区讨论。

总结与资源推荐

项目实战心得

通过本文的实践示例，您可以了解到如何使用 Sortable.js 来实现各种拖动排序功能。掌握 Sortable.js 的基本用法和常见配置选项，可以大大提高开发效率和用户体验。在实际项目中，灵活使用 Sortable.js 的配置选项和事件，可以根据具体需求定制不同的拖动排序场景。

如何持续学习Sortable.js

持续学习 Sortable.js 可以通过以下方式：

官方文档：定期查看最新版本的官方文档，了解新增的功能和改进。
实际项目：在实际项目中使用 Sortable.js，不断积累实际使用的经验。
社区参与：参与 Sortable.js 的 GitHub 社区，提交问题和建议，与其他开发者交流心得。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

蕪湖不蕪

手記
篇

粉絲

77

獲贊與收藏

340

關注作者，訂閱最新文章

閱讀免費教程

JavaScript 入門教程

80個小節 320815 2270

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

Sortable.js項目實戰：輕松入門教程

什么是Sortable.js

Sortable.js的基本功能与用途

如何引入Sortable.js

初始化Sortable.js的基本方法

如何让列表项可拖拽排序

如何自定义排序事件

解释常用配置项的作用

如何设置列表项的拖拽限制

如何控制拖拽的动画效果

实例1：创建一个简单的拖拽列表

实例2：实现可排序的文件夹结构

实例3：动态添加或删除列表项时的处理

常见问题与解决方案

如何调试Sortable.js相关的问题

浏览器兼容性注意事项

项目实战心得

推荐学习资料与社区资源

如何持续学习Sortable.js

閱讀免費教程

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Sortable.js項目實戰：輕松入門教程

什么是Sortable.js

Sortable.js的基本功能与用途

如何引入Sortable.js

初始化Sortable.js的基本方法

如何让列表项可拖拽排序

如何自定义排序事件

解释常用配置项的作用

如何设置列表项的拖拽限制

如何控制拖拽的动画效果

实例1：创建一个简单的拖拽列表

实例2：实现可排序的文件夹结构

实例3：动态添加或删除列表项时的处理

常见问题与解决方案

如何调试Sortable.js相关的问题

浏览器兼容性注意事项

项目实战心得

推荐学习资料与社区资源

如何持续学习Sortable.js

閱讀免費教程