为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Sortable.js开发入门指南

Sortable.js开发入门指南

标签：
前端工具
概述

Sortable.js 是一个功能强大的 JavaScript 库，用于实现列表项目的拖拽排序功能。它支持多种拖拽行为和事件监听器，适用于多种应用场景，如待办事项列表、文件管理器和数据表格等。本文将详细介绍如何引入和初始化Sortable.js，并提供基本和高级用法示例。

Sortable.js简介

Sortable.js 是一个功能强大的 JavaScript 库，用于实现列表项目的拖拽排序功能。它支持多种浏览器，包括最近的主流浏览器版本，因此在现代 web 应用程序中使用时，可以提供一致的用户体验。

什么是Sortable.js

Sortable.js 是一个开源库，它允许用户通过拖拽来重新排序列表中的元素。它支持多种不同的拖拽行为，如拖拽到外部区域、拖拽到同一列表内的元素之间等，具有高度的灵活性和可定制性。通过简单的初始化和配置选项，可以轻松地将拖拽功能添加到网页上。

Sortable.js的基本功能和应用场景

Sortable.js 的基本功能包括：

  • 拖拽排序：用户可以通过拖拽来重新排序列表中的项目。
  • 拖动到外部区域：支持将元素拖动到列表之外的区域，比如将一个元素从一个列表拖动到另一个列表。
  • 拖动到同一列表内不同元素之间：支持用户在同一个列表中拖动元素，以便调整它们的顺序。
  • 跨浏览器兼容性：支持现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。
  • 可定制的事件监听器：允许开发者监听和响应拖拽事件，以便在元素被拖动时执行自定义的逻辑。
  • 各种动画效果：支持多种动画效果，使拖拽效果更加平滑和吸引人。
  • 自定义样式：允许开发者通过 CSS 自定义拖拽元素的样式，以实现更符合设计需求的效果。

Sortable.js 适用于许多应用场景，如：

  • 待办事项列表：用户可以通过拖拽重新排列待办事项的优先级。
  • 文件管理器：用户可以拖拽文件和文件夹来重新组织它们。
  • 数据表格：用户可以拖拽数据表格中的行以重新排序数据。
  • 可拖拽的UI组件：用户可以拖拽UI组件（如卡片）来创建个性化的布局。
快速上手Sortable.js

如何引入Sortable.js

引入 Sortable.js 有多种方式，可以通过 CDN 获取最新版本，也可以下载库文件到本地使用。以下是如何通过 CDN 引入 Sortable.js 的示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.min.js"></script>
</head>
<body>
    <!-- HTML 结构 -->
</body>
</html>

基本的HTML结构

为了使用 Sortable.js，需要创建一个包含可拖拽元素的基本 HTML 结构。下面是一个简单的 HTML 示例，展示了如何创建一个可拖拽的元素列表：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.min.js"></script>
    <style>
        .sortable-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sortable-item {
            background-color: #f0f0f0;
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }
        .sortable-item:hover {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
    <ul class="sortable-list">
        <li class="sortable-item">项目 1</li>
        <li class="sortable-item">项目 2</li>
        <li class="sortable-item">项目 3</li>
        <li class="sortable-item">项目 4</li>
    </ul>
    <script>
        // 初始化 Sortable.js
        var sortable = new Sortable(document.querySelector('.sortable-list'), {
            animation: 150,
            ghostClass: 'sortable-ghost'
        });
    </script>
</body>
</html>

初始化Sortable.js的方法

在上面的代码中，Sortable 构造函数用于初始化一个可拖拽的列表。document.querySelector('.sortable-list') 选择器用于指定要应用拖拽功能的元素。Sortable 构造函数的选项可以进行自定义，例如：

  • animation：拖拽时的动画持续时间（单位为毫秒）。
  • ghostClass：设置拖拽元素的类名，以便自定义其样式。
基础用法详解

设置拖动元素

要使元素可拖动，需要将它们包裹在 Sortable 实例指定的容器中。以下是一个示例，展示了如何设置可拖动的元素：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.min.js"></script>
    <style>
        .sortable-item {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            display: inline-block;
            margin: 5px;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="sortable">
        <div class="sortable-item">元素 1</div>
        <div class="sortable-item">元素 2</div>
        <div class="sortable-item">元素 3</div>
        <div class="sortable-item">元素 4</div>
    </div>
    <script>
        var sortable = new Sortable(document.getElementById('sortable'), {
            animation: 150,
            ghostClass: 'sortable-ghost',
            draggable: '.sortable-item'
        });
    </script>
</body>
</html>

可拖动和可放置的目标区域定义

可以指定哪些元素是可拖动的，哪些区域是可放置的目标区域。这可以通过设置 Sortable 构造函数的选项来实现。例如，可以设置可拖动元素的类名：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.min.js"></script>
    <style>
        .sortable-item {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            display: inline-block;
            margin: 5px;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="sortable">
        <div class="sortable-item">元素 1</div>
        <div class="sortable-item">元素 2</div>
        <div class="sortable-item">元素 3</div>
        <div class="sortable-item">元素 4</div>
    </div>
    <script>
        var sortable = new Sortable(document.getElementById('sortable'), {
            animation: 150,
            ghostClass: 'sortable-ghost',
            draggable: '.sortable-item',
            dropzone: '.dropzone'  // 示例，假设有一个dropzone类选择器
        });
    </script>
</body>
</html>

监听拖动事件

可以通过监听 Sortable.js 提供的事件来执行自定义逻辑。以下是一些常见的事件及其对应的回调函数：

var sortable = new Sortable(document.getElementById('sortable'), {
    animation: 150,
    ghostClass: 'sortable-ghost',
    draggable: '.sortable-item',
    onAdd: function (/** @type {SortableAddEventDetail} */ evt) {
        console.log('元素已添加到列表:', evt.item.textContent);
    },
    onRemove: function (/** @type {SortableRemoveEventDetail} */ evt) {
        console.log('元素已从列表中移除:', evt.item.textContent);
    },
    onSort: function (/** @type {SortableSortEventDetail} */ evt) {
        console.log('元素已重新排序:', evt.newIndex, evt.oldIndex);
    }
});
高级功能介绍

使用动画效果

Sortable.js 支持多种动画效果，可以设置动画的持续时间。例如，你可以设置动画时长为 300 毫秒：

var sortable = new Sortable(document.getElementById('sortable'), {
    animation: 300,
    ghostClass: 'sortable-ghost',
    draggable: '.sortable-item'
});

自定义拖动元素的样式

可以通过 CSS 自定义拖拽元素的样式。例如，可以设置拖拽元素的背景颜色：

<style>
    .sortable-ghost {
        background-color: #ddd;
    }
</style>

还可以通过 onStart 和 onEnd 事件动态修改样式：

var sortable = new Sortable(document.getElementById('sortable'), {
    animation: 150,
    ghostClass: 'sortable-ghost',
    draggable: '.sortable-item',
    onStart: function (/** @type {SortableStartEventDetail} */ evt) {
        evt.item.style.opacity = 0.5;
    },
    onEnd: function (/** @type {SortableEndEventDetail} */ evt) {
        evt.item.style.opacity = 1;
    }
});

通过配置选项调整行为

Sortable.js 提供了许多配置选项，可以通过这些选项调整拖拽行为。例如，可以设置是否允许拖拽到外部区域：

var sortable = new Sortable(document.getElementById('sortable'), {
    animation: 150,
    ghostClass: 'sortable-ghost',
    draggable: '.sortable-item',
    swap: true,  // 允许拖拽到外部区域
    dragClass: 'sortable-item-dragging',
    disabled: false,  // 是否禁用拖拽功能
    filter: '.no-drag'  // 禁止拖拽带有 .no-drag 类的元素
});
常见问题与解决方案

初始化失败的常见原因及解决办法

初始化失败的常见原因包括：

  • JavaScript 代码加载顺序错误，导致 Sortable 构造函数未定义。
  • HTML 结构错误，导致无法正确选择要应用拖拽功能的元素。

解决办法包括：

  • 确保引入了 Sortable.js 库。
  • 检查 JavaScript 代码是否正确加载。
  • 确保选择器可以正确选择到要拖拽的元素。

在复杂页面结构中使用Sortable.js的技巧

在复杂页面结构中使用 Sortable.js 时，可以考虑以下技巧：

  • 使用唯一的选择器，以确保选择到正确的元素。
  • 考虑将拖拽功能封装成独立的模块，以便在多个地方复用。
  • 在事件监听器中使用事件委托，以减少事件绑定的数量。

性能优化建议

性能优化建议包括：

  • 限制拖拽元素的数量，以减少浏览器的处理负担。
  • 在拖拽过程中减少不必要的计算和渲染操作。
  • 使用 useWindowAsCenter 选项，使其拖拽操作更流畅。
实战演练

构建一个简单的待办事项列表

构建一个待办事项列表，用户可以通过拖拽来重新排列待办事项的优先级。首先，创建一个包含待办事项的列表，并初始化 Sortable.js：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <style>
        .todo-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .todo-item {
            background-color: #f0f0f0;
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .todo-item input[type="checkbox"] {
            margin-right: 10px;
        }
        .todo-item .delete-btn {
            cursor: pointer;
            color: #ff0000;
        }
    </style>
</head>
<body>
    <ul id="todo-list" class="todo-list">
        <li class="todo-item">
            <input type="checkbox" class="todo-checkbox">
            <span>待办事项 1</span>
            <span class="delete-btn">删除</span>
        </li>
        <li class="todo-item">
            <input type="checkbox" class="todo-checkbox">
            <span>待办事项 2</span>
            <span class="delete-btn">删除</span>
        </li>
        <li class="todo-item">
            <input type="checkbox" class="todo-checkbox">
            <span>待办事项 3</span>
            <span class="delete-btn">删除</span>
        </li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('todo-list'), {
            animation: 150,
            ghostClass: 'sortable-ghost',
            draggable: '.todo-item'
        });

        document.querySelectorAll('.delete-btn').forEach(function (btn) {
            btn.addEventListener('click', function (event) {
                event.preventDefault();
                event.target.parentElement.remove();
            });
        });
    </script>
</body>
</html>

利用Sortable.js实现可拖动的元素排序

利用 Sortable.js 实现一个可拖动的元素排序功能。首先，创建一个包含可拖动元素的列表，并初始化 Sortable.js：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可拖动元素排序</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <style>
        .sortable-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sortable-item {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            display: inline-block;
            margin: 5px;
            cursor: move;
        }
    </style>
</head>
<body>
    <ul id="sortable-list" class="sortable-list">
        <li class="sortable-item">元素 1</li>
        <li class="sortable-item">元素 2</li>
        <li class="sortable-item">元素 3</li>
        <li class="sortable-item">元素 4</li>
    </ul>
    <script>
        var sortable = new Sortable(document.getElementById('sortable-list'), {
            animation: 150,
            ghostClass: 'sortable-ghost',
            draggable: '.sortable-item'
        });
    </script>
</body>
</html>

通过上述示例，可以轻松地在网页中实现拖拽排序功能，从而提升用户体验。

点击查看更多内容
发表于 2024.09.30 13:58， 共 165 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

波斯汪

手记
篇
粉丝
67
获赞与收藏
430

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消