为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Sortable.js入门：轻松实现网页元素排序功能

Sortable.js入门：轻松实现网页元素排序功能

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

本文介绍了Sortabel.js，一个轻量级的JavaScript库，用于实现网页元素的拖拽排序功能。详细讲解了Sortable.js的优点、引入方法、基本配置和高级功能，帮助读者快速上手这一实用工具。

介绍Sortable.js

什么是Sortable.js

Sortable.js 是一个轻量级的 JavaScript 库，用于实现网页元素的拖拽排序功能。它支持多种 HTML 元素的排序，并且可以很容易地扩展，以适应各种排序需求。Sortable.js 是开源的，可以在多个项目中免费使用。

Sortable.js的优点

  1. 轻量级：Sortable.js 的文件大小非常小，通常只需要几KB的大小。
  2. 易用性：使用 Sortable.js 可以很容易地实现拖拽排序功能，而无需复杂的设置。
  3. 兼容性：兼容各种现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。
  4. 自定义性：提供多种配置选项，可以自定义拖拽行为、动画效果等。
  5. 社区支持：Sortable.js 有一个活跃的社区，可以提供技术支持和分享最佳实践。
如何引入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.min.js"></script>
</head>
<body>
  <!-- HTML 代码 -->
</body>
</html>
安装与配置

创建基本的HTML结构

在引入 Sortable.js 后，需要创建一个基本的 HTML 结构，用于实现拖拽排序。以下是一个简单的示例：

<!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.min.js"></script>
</head>
<body>
  <ul id="list">
    <li class="item">项目1</li>
    <li class="item">项目2</li>
    <li class="item">项目3</li>
  </ul>
</body>
</html>

初始化Sortable.js

要使 ul 元素中的 li 子元素可拖拽排序，需要调用 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.min.js"></script>
</head>
<body>
  <ul id="list">
    <li class="item">项目1</li>
    <li class="item">项目2</li>
    <li class="item">项目3</li>
  </ul>
  <script>
    var el = document.getElementById('list');
    var sortable = new Sortable(el, {
      // 可以添加其他配置项
    });
  </script>
</body>
</html>
基础用法

基本的拖拽排序功能实现

使用上面的代码，可以通过拖拽 li 元素来实现排序。默认情况下，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.min.js"></script>
</head>
<body>
  <ul id="list1">
    <li class="item">项目1-1</li>
    <li class="item">项目1-2</li>
    <li class="item">项目1-3</li>
  </ul>
  <ul id="list2">
    <li class="item">项目2-1</li>
    <li class="item">项目2-2</li>
    <li class="item">项目2-3</li>
  </ul>
  <script>
    var el1 = document.getElementById('list1');
    var sortable1 = new Sortable(el1, {
      // 可以添加其他配置项
    });

    var el2 = document.getElementById('list2');
    var sortable2 = new Sortable(el2, {
      // 可以添加其他配置项
    });
  </script>
</body>
</html>
高级功能介绍

添加拖拽事件监听

Sortable.js 提供了多种事件监听器，用于在拖拽过程中触发特定行为。以下是一些常用的事件：

  • onStart：拖拽开始时触发。
  • onEnd：拖拽结束时触发。
  • onMove：在拖拽过程中触发。
  • onAdd：元素被添加到列表时触发。
  • onRemove：元素从列表中移除时触发。

示例如下：

<!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.min.js"></script>
</head>
<body>
  <ul id="list">
    <li class="item">项目1</li>
    <li class="item">项目2</li>
    <li class="item">项目3</li>
  </ul>
  <script>
    var el = document.getElementById('list');
    var sortable = new Sortable(el, {
      onMove: function (evt, ui) {
        console.log('正在拖拽');
      },
      onEnd: function (evt) {
        console.log('拖拽结束');
      }
    });
  </script>
</body>
</html>

自定义拖拽动画

Sortable.js 提供了 animation 配置项，用于自定义拖拽过程中的动画效果。默认情况下，Sortable.js 使用平滑的动画效果。你也可以通过 pullsAllowedSortChildren、pullsAllowed 等选项自定义动画行为：

<!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.min.js"></script>
</head>
<body>
  <ul id="list">
    <li class="item">项目1</li>
    <li class="item">项目2</li>
    <li class="item">项目3</li>
  </ul>
  <script>
    var el = document.getElementById('list');
    var sortable = new Sortable(el, {
      animation: 100, // 设置动画时间为100毫秒
      pullsAllowed: true, // 允许跨列表拖拽
      pullsAllowedSortChildren: false, // 不允许跨列表拖拽子元素
      onMove: function (evt, ui) {
        console.log('正在拖拽');
      },
      onEnd: function (evt) {
        console.log('拖拽结束');
      }
    });
  </script>
</body>
</html>
常见问题与解决方案

解决元素无法拖拽的问题

如果元素无法拖拽，可以检查以下几个方面：

  1. HTML 结构是否正确：确保 HTML 结构符合 Sortable.js 的要求。
  2. 引入脚本是否正确：确保 Sortable.js 脚本引入成功。
  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.min.js"></script>
</head>
<body>
  <ul id="list">
    <li class="item">项目1</li>
    <li class="item">项目2</li>
    <li class="item">项目3</li>
  </ul>
  <script>
    var el = document.getElementById('list');
    if (el) {
      var sortable = new Sortable(el, {
        // 配置项
      });
    } else {
      console.log('元素未找到');
    }
  </script>
</body>
</html>

如何处理排序后的数据

在拖拽排序后，你可能需要将排序后的数据保存到服务器或进行其他操作。可以通过监听 onEnd 事件来获取排序后的数据：

<!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.min.js"></script>
</head>
<body>
  <ul id="list">
    <li class="item">项目1</li>
    <li class="item">项目2</li>
    <li class="item">项目3</li>
  </ul>
  <script>
    var el = document.getElementById('list');
    var sortable = new Sortable(el, {
      onEnd: function (evt) {
        // 获取排序后的数据
        var items = el.children;
        for (var i = 0; i < items.length; i++) {
          console.log(items[i].textContent);
        }
      }
    });
  </script>
</body>
</html>

以上是 Sortable.js 的基本使用方法和一些高级功能。通过 Sortable.js，你可以轻松实现网页元素的拖拽排序功能，并根据需要进行自定义。更多信息可以参考 Sortable.js 的官方文档。

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

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

举报
为 TA 点赞

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

评论

作者其他优质文章

正在加载中

qq_笑_17

手记
篇
粉丝
11
获赞与收藏
49

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消