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

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

标签：
前端工具
概述

本文详细介绍了一个轻量级且易于使用的JavaScript库Sortable.js，用于实现网页元素的拖拽排序功能。该库支持多种类型的元素排序，并且可以与现有的前端框架和库无缝集成。文章涵盖了Sortable.js的基本特点、安装方法、基本使用方法以及高级功能，帮助开发者快速实现拖拽排序功能，提升用户体验。

介绍Sortable.js

什么是Sortable.js

Sortable.js 是一个轻量级、易于使用的 JavaScript 库，用于实现拖拽排序功能。该库支持各种类型的元素排序，如列表项、网格布局项等。Sortable.js 不依赖于任何其他库，并且可以与现有的前端框架和库（如 React、Vue、Angular 等）无缝集成。

Sortable.js的基本特点

Sortable.js 具有以下特点：

  1. 轻量级：Sortabel.js 的大小不到 10KB（压缩后），加载速度快，对性能影响小。
  2. 易于使用：通过简单的配置即可实现拖拽功能。
  3. 丰富功能：支持多种拖拽事件、回调函数、自定义样式等功能。
  4. 兼容性好：支持现代浏览器与 IE9 及以上版本。
  5. 社区活跃：拥有大量的用户和贡献者，问题解答迅速。

为什么使用Sortable.js

使用 Sortable.js 可以带来以下好处：

  1. 简化前端开发：通过 Sortable.js，开发者可以快速实现拖拽排序功能，减少复杂的逻辑代码。
  2. 提高用户体验：拖拽排序功能可以增加用户的互动性，提供更直观的操作方式。
  3. 易于维护：Sortabel.js 提供了丰富的配置选项和事件，方便开发者进行维护和扩展。
  4. 与现有库兼容性好：可以与 React、Vue、Angular 等现有前端框架无缝集成。
安装与引入Sortable.js

使用CDN引入

为了在项目中使用 Sortable.js，可以通过 CDN 引入。以下是如何引入 Sortable.js 的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable.js 示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.7.0/Sortable.min.css">
</head>
<body>
    <ul id="list">
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.7.0/Sortable.min.js"></script>
    <script>
        var el = document.getElementById('list');
        var sortable = new Sortable(el, {
            animation: 150,
            handle: '.handle'
        });
    </script>
</body>
</html>

使用npm安装

对于使用现代前端构建工具（如 Webpack、Rollup 等）的项目，可以通过 npm 安装 Sortable.js。

  1. 安装 Sortable.js：
npm install sortablejs
  1. 在项目代码中引入 Sortable.js：
import Sortable from 'sortablejs';
初始化Sortable.js

初始化 Sortable.js 时，需要指定要对哪个元素进行排序操作。以下是一个简单的示例：

var el = document.getElementById('list');
var sortable = new Sortable(el);
基本使用方法

基本参数配置

Sortable.js 提供了多种配置选项，帮助开发者自定义排序行为。以下是一些常用的配置选项：

  • animation：设置拖拽动画的持续时间（单位：毫秒）。
  • handle：指定拖拽句柄的 CSS 选择器，只有在句柄上点击时才会触发拖拽。
  • onEnd：拖拽结束时触发的回调函数。
  • onStart：拖拽开始时触发的回调函数。
  • store：存储排序结果，可保存到本地存储或服务器。
var el = document.getElementById('list');
var sortable = new Sortable(el, {
    animation: 150,
    handle: '.handle',
    onEnd: function(e) {
        console.log('拖拽结束：', e);
    },
    onStart: function(e) {
        console.log('拖拽开始：', e);
    }
});
常见用法示例

拖拽排序列表项

拖拽排序列表项是 Sortable.js 最常见的应用场景之一。以下是一个简单的示例，展示如何实现列表项的拖拽排序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable.js 示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.7.0/Sortable.min.css">
</head>
<body>
    <ul id="list">
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.7.0/Sortable.min.js"></script>
    <script>
        var el = document.getElementById('list');
        var sortable = new Sortable(el, {
            animation: 150,
            handle: '.handle'
        });
    </script>
</body>
</html>

可排序的网格布局

除了列表项，Sortable.js 也可以用于实现可排序的网格布局。以下是一个简单的网格布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable.js 示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.7.0/Sortable.min.css">
    <style>
        .grid-item {
            width: 100px;
            height: 100px;
            float: left;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="grid">
        <div class="grid-item">项目1</div>
        <div class="grid-item">项目2</div>
        <div class="grid-item">项目3</div>
        <div class="grid-item">项目4</div>
        <div class="grid-item">项目5</div>
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdnjs.cloudflare.com/ajax/libs/sortable/0.7.0/Sortable.min.js"></script>
    <script>
        var el = document.getElementById('grid');
        var sortable = new Sortable(el, {
            animation: 150,
            handle: '.grid-item'
        });
    </script>
</body>
</html>
事件与回调函数

监听拖拽事件

Sortable.js 提供了多种事件，允许开发者监听和处理拖拽过程中发生的事件。以下是一些常用的事件：

  • onStart：拖拽开始时触发。
  • onEnd：拖拽结束时触发。
  • onMove：拖动过程中每移动一次触发。
  • onAdd：添加项时触发。
  • onRemove：删除项时触发。
var el = document.getElementById('list');
var sortable = new Sortable(el, {
    animation: 150,
    handle: '.handle',
    onStart: function(e) {
        console.log('拖拽开始：', e);
    },
    onEnd: function(e) {
        console.log('拖拽结束：', e);
    },
    onMove: function(e) {
        console.log('拖动过程中：', e);
    },
    onAdd: function(e) {
        console.log('添加项：', e);
    },
    onRemove: function(e) {
        console.log('删除项：', e);
    }
});

使用回调函数处理逻辑

通过回调函数，开发者可以自定义拖拽操作后的逻辑处理。例如，在 onEnd 回调函数中，可以保存当前的排序结果到本地存储或服务器。

var el = document.getElementById('list');
var sortable = new Sortable(el, {
    animation: 150,
    handle: '.handle',
    onEnd: function(e) {
        console.log('拖拽结束：', e);
        // 保存排序结果
        localStorage.setItem('sortableData', JSON.stringify(e.newIndex));
    }
});
自定义样式与交互

为Sortable添加自定义样式

自定义样式可以为拖拽排序功能添加更多视觉效果。以下是一些常用的自定义样式规则：

.sortable-ghost {
    opacity: 0.5;
    background-color: #ccc;
}

.sortable-dragging {
    opacity: 0.5;
    border-color: #ff0000;
}

在初始化Sortable.js时，可以通过 CSS 类来应用自定义样式：

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

调整Sortable.js的交互体验

除了自定义样式，还可以通过配置选项来调整交互体验，例如设置拖拽句柄、添加辅助线等。以下是一些常用的交互选项：

  • ghostClass：设置拖拽时的虚影类名。
  • chosenClass：设置当前拖拽项的类名。
  • dragClass：设置拖拽时的列表项类名。
  • helperClass：设置拖拽时的辅助线类名。
var el = document.getElementById('list');
var sortable = new Sortable(el, {
    animation: 150,
    handle: '.handle',
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-dragging',
    dragClass: 'sortable-dragging-item',
    helperClass: 'sortable-helper'
});

通过这些配置选项和自定义样式，可以实现丰富的交互效果，提升用户体验。

总结

本文详细介绍了 Sortable.js 的使用方法和高级功能。从基本概念到实际应用，Sortable.js 可以帮助开发者快速实现拖拽排序功能，提高用户体验。通过自定义样式和交互选项，还可以进一步优化排序功能的视觉效果和交互体验。希望本文能帮助你更好地理解和使用 Sortable.js。

点击查看更多内容
发表于 2024.09.30 09:30， 共 590 人浏览

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

举报
为 TA 点赞

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

评论

作者其他优质文章

正在加载中

回首忆惘然

手记
篇
粉丝
74
获赞与收藏
413

关注作者，订阅最新文章

阅读免费教程

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消