Sortable.js 安装和配置指南

2026-01-20 01:37:56作者：晏闻田Solitary

Sortable，一款高效的JavaScript库，赋予你拖拽排序的力量。无论是在单个列表间滑动还是跨列表交换，Sortable都能轻松应对，兼容触摸设备与现代浏览器（包括IE9）。无需jQuery，借助HTML5原生拖放API，实现流畅的动画效果和智能滚动。这个库设计灵活，支持多拖、CSS变换及各种框架集成，如React、Vue等，同时提供简单的API与插件系统，让自定义成为可能。无论是Web应用还是复杂界面管理，Sortable都是你实现优雅交互排序的理想选择。开始你的无痛排序之旅，体验代码与直觉的完美融合。

项目地址：https://gitcode.com/gh_mirrors/sor/Sortable

1. 项目基础介绍和主要编程语言

项目基础介绍

Sortable.js 是一个用于现代浏览器和触摸设备的可重新排序的拖放列表的 JavaScript 库。它不需要 jQuery 或其他框架，支持多种前端框架（如 Vue、React、Angular 等），并且具有丰富的功能，如触摸支持、动画、多拖支持等。

主要编程语言

Sortable.js 主要使用 JavaScript 编写，适用于前端开发。

2. 项目使用的关键技术和框架

关键技术

HTML5 Drag and Drop API: 使用原生的 HTML5 拖放 API 实现拖放功能。
CSS 动画: 支持 CSS 动画，使拖放操作更加流畅。
多拖支持: 支持同时拖动多个项目。
智能自动滚动: 当拖动项目接近边缘时，自动滚动列表。

框架支持

Sortable.js 支持多种前端框架，包括但不限于：

Vue.js
React
Angular
jQuery
Knockout
Meteor
Polymer
Ember

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装之前，请确保你已经安装了以下工具：

Node.js: 用于运行 JavaScript 环境。
npm 或 yarn: 用于安装和管理 JavaScript 包。

安装步骤

步骤 1: 创建项目目录

首先，创建一个新的项目目录，并在该目录下初始化 npm 项目。

mkdir my-sortable-project
cd my-sortable-project
npm init -y

步骤 2: 安装 Sortable.js

使用 npm 或 yarn 安装 Sortable.js。

npm install sortablejs

或者使用 yarn:

yarn add sortablejs

步骤 3: 创建 HTML 文件

在项目目录下创建一个新的 HTML 文件，例如 index.html，并在其中引入 Sortable.js。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable.js 示例</title>
    <script src="node_modules/sortablejs/Sortable.min.js"></script>
</head>
<body>
    <ul id="items">
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
    </ul>
    <script>
        var el = document.getElementById('items');
        var sortable = Sortable.create(el);
    </script>
</body>
</html>

步骤 4: 运行项目

你可以使用任何静态服务器来运行这个项目。例如，使用 http-server：

npm install -g http-server
http-server

然后在浏览器中打开 http://localhost:8080，你将看到一个可以拖放排序的列表。

配置选项

Sortable.js 提供了丰富的配置选项，你可以根据需要进行调整。例如：

var sortable = Sortable.create(el, {
    animation: 150, // 动画速度
    ghostClass: 'sortable-ghost', // 拖放时的占位符类名
    handle: '.my-handle', // 拖动手柄的选择器
    filter: '.ignore-elements', // 忽略拖动的元素选择器
    // 其他配置选项...
});