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

Sortable.js学习：轻松入门指南

标签：
JavaScript 前端工具 Vue.js
概述

本文详细介绍了Sortable.js的使用方法和应用场景，包括如何引入和初始化Sortable对象，以及设置基本选项和自定义拖动效果。通过实际案例分析，展示了如何实现拖放排序列表和增加删除功能。文章还提供了详细的事件处理和性能优化技巧，帮助你更好地理解和使用Sortable.js。在学习Sortable.js的过程中，你可以参考官方网站文档和Stack Overflow上的解决方案。

1. 介绍Sortable.js

1.1 什么是Sortable.js

Sortable.js 是一个用于实现拖放功能的开源库。它提供了简单易用的 API，允许用户以最少的代码实现列表项的拖放排序功能。Sortable.js 支持多种排序模式和事件回调，使得对复杂拖放需求的处理变得更加简单。

1.2 Sortable.js 的作用和应用场景

Sortable.js 最常用的应用场景是在网页中实现列表或项目排序功能。例如，博客文章列表、待办事项列表、文件排序等，都可以通过使用 Sortable.js 来实现。此外，Sortable.js 还可以用于实现复杂的界面交互功能，比如可拖动的侧边栏、可排序的表格行等。

1.3 如何引入Sortable.js

要使用 Sortable.js，你需要先将其引入到你的项目中。以下是几种引入方法：

  1. 通过 CDN 引入：

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
  2. 通过 npm 安装并引入： 
    npm install sortablejs

    然后在 JavaScript 文件中引入：

    import Sortable from 'sortablejs';

一旦引入了 Sortable.js，你就可以开始使用它来初始化和配置拖放功能了。

2. 基本使用方法

2.1 初始化Sortable对象

要使用 Sortable.js，首先需要创建一个 Sortable 对象。这通常通过将 Sortable 构造函数应用于 DOM 元素来完成。以下是一个基本示例：

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

在这个例子中，el 是一个包含可排序项的 DOM 元素，比如一个 ul 或 div。Sortable 构造函数会初始化这段 HTML 作为拖放列表。

2.2 设置基本选项

Sortable.js 提供了许多配置选项，以满足不同的需求。以下是一些基本选项：

  • handle：指定拖动的把手元素。
  • onStart：拖动开始时触发的回调函数。
  • onEnd：拖动结束时触发的回调函数。
  • onSort：排序过程中每次排序时触发的回调函数。

例如，设置一个拖动手柄：

var el = document.getElementById('list');
var sortable = new Sortable(el, {
    handle: '.item'
});

在这个例子中，.item 类的元素将作为每个列表项的拖动手柄。

2.3 使用HTML和JavaScript示例

以下是一个完整的示例，展示如何创建一个简单的拖放列表：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable Example</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>
    <ul id="list">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>

    <script>
        var el = document.getElementById('list');
        var sortable = new Sortable(el, {
            handle: '.item'
        });
    </script>
</body>
</html>

在这个例子中，Sortable 对象被初始化为拖动手柄为列表项本身。当你拖动这些列表项时，顺序将实时更新。

3. 常见选项和配置

3.1 排序方向设置

Sortable.js 支持设置排序的方向。你可以通过 pullAllowedDirections 选项来控制列表项的拖放方向。

例如，仅允许向上或向下拖动：

var el = document.getElementById('list');
var sortable = new Sortable(el, {
    pullAllowedDirections: Sortable.DIRECTION_UPDOWN
});

3.2 禁用元素排序

如果某些元素不应参与排序，可以通过 ignore 选项将它们排除在外。

例如，排除带有 ignore-me 类的元素：

var el = document.getElementById('list');
var sortable = new Sortable(el, {
    ignore: '.ignore-me'
});

3.3 自定义拖动效果

你可以通过 CSS 来自定义拖动元素的样式。例如，改变背景颜色和添加阴影：

.item {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    transition: background 0.2s;
}

.sortable-ghost {
    background-color: #d0d0d0;
    border: 2px dashed #000;
}

在 JavaScript 中设置 ghostClass 选项：

var el = document.getElementById('list');
var sortable = new Sortable(el, {
    ghostClass: 'sortable-ghost'
});

3.4 事件处理

Sortable.js 支持多种事件回调函数，这些函数将在拖动操作的不同阶段被触发。你可以通过这些回调函数来实现更高级的功能，比如记录排序状态或发送数据到服务器。

例如，当拖动开始时记录事件：

var el = document.getElementById('list');
var sortable = new Sortable(el, {
    onStart: function(e) {
        console.log('拖动开始：', e.item);
    },
    onEnd: function(e) {
        console.log('拖动结束：', e.item);
    },
    onSort: function(e) {
        console.log('排序：', e.item);
    }
});
4. 实际案例分析

4.1 实现简单的拖放排序列表

以下是一个完整的示例，展示如何实现一个简单的可拖放排序列表：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable List Example</title>
    <style>
        .item {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            transition: background 0.2s;
        }

        .sortable-ghost {
            background-color: #d0d0d0;
            border: 2px dashed #000;
        }
    </style>
    <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>
    <ul id="list">
        <li class="item">Item 1</li>
        <li class="item">Item 2</li>
        <li class="item">Item 3</li>
    </ul>

    <script>
        var el = document.getElementById('list');
        var sortable = new Sortable(el, {
            handle: '.item',
            ghostClass: 'sortable-ghost'
        });
    </script>
</body>
</html>

4.2 增加删除功能

为了增加删除功能，可以在每个列表项中添加一个删除按钮，并在点击时触发删除操作：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable List with Delete</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>
    <ul id="list">
        <li class="item"><span class="delete">删除</span>Item 1</li>
        <li class="item"><span class="delete">删除</span>Item 2</li>
        <li class="item"><span class="delete">删除</span>Item 3</li>
    </ul>

    <script>
        var el = document.getElementById('list');
        var sortable = new Sortable(el, {
            handle: '.item'
        });

        el.querySelectorAll('.delete').forEach(function(item) {
            item.addEventListener('click', function(e) {
                e.stopPropagation(); // 阻止冒泡
                e.preventDefault();
                this.closest('li').remove();
            });
        });
    </script>
</body>
</html>

4.3 自定义元素样式

你可以进一步自定义拖动手柄和拖动元素的样式。例如，将拖动手柄设为一个按钮：

<!DOCTYPE html>
<html>
<head>
    <title>Sortable List with Custom Handle</title>
    <style>
        .item {
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            padding: 10px;
            margin: 5px;
            transition: background 0.2s;
        }

        .handle {
            cursor: move;
        }

        .sortable-ghost {
            background-color: #d0d0d0;
            border: 2px dashed #000;
        }
    </style>
    <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>
    <ul id="list">
        <li class="item">
            <span class="handle">拖动</span>Item 1
        </li>
        <li class="item">
            <span class="handle">拖动</span>Item 2
        </li>
        <li class="item">
            <span class="handle">拖动</span>Item 3
        </li>
    </ul>

    <script>
        var el = document.getElementById('list');
        var sortable = new Sortable(el, {
            handle: '.handle',
            ghostClass: 'sortable-ghost'
        });
    </script>
</body>
</html>
5. 常见问题与解决

5.1 常见错误及解决方案

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

问题1: 拖动元素没有响应

检查你是否正确设置了 handle 选项，并确保拖动手柄的 CSS 样式没有被覆盖。

问题2: 拖动元素消失或者没有正确移动

确保在 li 或其他容器元素上设置足够的 position: relative 或 position: absolute 样式，以便拖动效果正常。

问题3: SVG 图片无法拖动

SVG 图片在浏览器中默认不可拖动。你需要通过 CSS 设置 draggable: 'true' 或使用 JavaScript 设置 draggable 属性：

document.querySelectorAll('svg').forEach(function(svg) {
    svg.setAttribute('draggable', 'true');
});

5.2 性能优化技巧

1. 限制拖动元素的数量

如果列表项较多，可以限制拖动元素的数量，以提高性能。

2. 使用虚拟列表

对于非常长的列表，可以考虑使用虚拟列表（Virtual List）技术来减少内存占用和提高渲染效率。

例如，限制拖动元素的数量：

var el = document.getElementById('list');
var sortable = new Sortable(el, {
    onMove: function (evt, ui) {
        var items = el.children;
        if (items.length > 10) {
            return false;
        }
    }
});

5.3 兼容性问题

Sortable.js 通常在现代浏览器中表现良好，但在某些情况下可能会遇到兼容性问题。例如，在旧版本的 Internet Explorer 中，某些功能可能无法正常工作。确保在所有目标浏览器上进行测试，并根据需要调整代码。

6. 总结与后续学习

6.1 回顾学习内容

在这篇文章中，我们学习了如何使用 Sortable.js 创建可拖动排序的列表。我们介绍了初始化 Sortable 对象、设置基本选项、自定义拖动效果以及处理事件的方法。通过实际案例分析，我们还展示了如何实现更复杂的功能，如增加删除功能和自定义元素样式。

6.2 推荐进一步学习资源

  • 官方网站文档：Sortable.js 的官方文档提供了详细的 API 参考和示例，是深入学习的好资源。访问 Sortable.js 官方网站。
  • 慕课网：如果你想进一步学习前端技术和框架，可以尝试在 慕课网 上找相关课程。
  • Stack Overflow：在 Stack Overflow 上搜索和 Sortable.js 相关的问题，可以找到许多实际问题的解决方案和最佳实践。

6.3 Q&A

  • Q: 我可以直接在 HTML 中添加拖动手柄吗？

    • A: 是的，你可以通过在 HTML 中添加类名来设置拖动手柄，如下所示： 
      <li class="item">
<span class="handle">拖动</span>Item 1
</li>

      在 JavaScript 中配置 handle 选项：

      var el = document.getElementById('list');
var sortable = new Sortable(el, {
handle: '.handle'
});

  • Q: 如何将排序状态保存到服务器？

    • A: 你可以通过监听 onSort 事件，在排序结束后将新顺序发送到服务器。例如： 
      var el = document.getElementById('list');
var sortable = new Sortable(el, {
onSort: function() {
    var order = [];
    el.querySelectorAll('.item').forEach(function(item, index) {
        order.push(item.dataset.orderIndex || index);
    });
    // 将 order 发送到服务器
    console.log(order);
}
});

  • Q: 如何支持多个拖放列表？

    • A: 你可以为每个列表创建一个独立的 Sortable 对象。确保每个列表都有唯一的 ID，这样可以更容易地管理和区分不同的列表。 
      
<ul id="list1">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
<ul id="list2">
<li class="item">Item 3</li>
<li class="item">Item 4</li>
</ul>

    <script>
    var list1 = document.getElementById('list1');
    var list2 = document.getElementById('list2');

    var sortable1 = new Sortable(list1, {
    handle: '.item'
});
var sortable2 = new Sortable(list2, {
    handle: '.item'
});

    </script>

点击查看更多内容
发表于 2024.11.14 14:43， 共 21 人浏览

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

举报
为 TA 点赞

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

评论

作者其他优质文章

正在加载中

MYYA

手记
篇
粉丝
75
获赞与收藏
326

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消