sortable.js怎么下载

Sortable.js 是一个轻量级的 JavaScript 库，用于创建拖放和排序列表及网格。要下载并使用 Sortable.js，你可以通过以下几种方法：使用 CDN、通过 npm 安装、或直接下载源代码。以下详细介绍了每一种方法的具体步骤，并推荐通过 npm 安装。

CDN、npm 安装、直接下载源代码，其中推荐通过 npm 安装。通过 npm 安装不仅可以更方便地管理项目依赖，还能确保获取最新的版本。接下来，我们将详细介绍如何通过这几种方式获取 Sortable.js。

一、通过 CDN 使用

1、引入 Sortable.js CDN

使用 CDN 是最快捷的方法，无需下载，只需在 HTML 文件中添加以下脚本标签：

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

这种方法适用于快速测试或小型项目，但并不适合复杂的项目，因为无法离线使用。

2、使用 Sortable.js

引入脚本后，你可以在 JavaScript 文件中直接使用 Sortable.js。例如：

const el = document.getElementById('items');
const sortable = new Sortable(el, {
  animation: 150,
  ghostClass: 'sortable-ghost',
});

二、通过 npm 安装

1、安装 npm

如果你还没有安装 npm，可以通过 Node.js 官网下载安装包，安装 Node.js 时会同时安装 npm。

2、通过 npm 安装 Sortable.js

在你的项目根目录下运行以下命令：

npm install sortablejs

3、在项目中使用

安装完成后，可以在你的 JavaScript 文件中导入并使用：

import Sortable from 'sortablejs';
const el = document.getElementById('items');
const sortable = new Sortable(el, {
  animation: 150,
  ghostClass: 'sortable-ghost',
});

这种方法适用于复杂项目，能够更好地管理依赖和版本。

三、直接下载源代码

1、下载源码

你可以从 Sortable.js 的 GitHub 仓库下载源代码：Sortable.js GitHub

2、引入 Sortable.js

将下载的文件放置到你的项目目录中，然后在 HTML 文件中引入：

<script src="path/to/Sortable.js"></script>

3、使用 Sortable.js

引入脚本后，你可以在 JavaScript 文件中直接使用 Sortable.js。例如：

const el = document.getElementById('items');
const sortable = new Sortable(el, {
  animation: 150,
  ghostClass: 'sortable-ghost',
});

四、集成 Sortable.js 到项目中

1、创建基本 HTML 结构

首先，创建一个基本的 HTML 文件，并添加一个可排序的列表：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sortable.js Example</title>
</head>
<body>
  <ul id="items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  <script src="path/to/Sortable.js"></script>
  <script>
    const el = document.getElementById('items');
    const sortable = new Sortable(el, {
      animation: 150,
      ghostClass: 'sortable-ghost',
    });
  </script>
</body>
</html>

2、样式和动画

为了更好的用户体验，你可以添加一些 CSS 样式和动画：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
}
li {
  margin: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move;
}
.sortable-ghost {
  opacity: 0.4;
}

3、更多配置选项

Sortable.js 提供了许多配置选项，可以根据项目需求进行调整。例如：

const sortable = new Sortable(el, {
  animation: 150,
  ghostClass: 'sortable-ghost',
  handle: '.handle',
  onEnd: function (evt) {
    console.log('Item moved:', evt.item);
  },
});

通过这些配置选项，你可以定制拖放行为、添加事件回调等。

4、集成到前端框架中

如果你使用的是 Vue、React 或 Angular 等前端框架，可以通过封装组件的方式集成 Sortable.js。例如，在 Vue 中：

<template>
  <ul ref="sortableList">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>
<script>
import Sortable from 'sortablejs';
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
    };
  },
  mounted() {
    new Sortable(this.$refs.sortableList, {
      animation: 150,
      ghostClass: 'sortable-ghost',
    });
  },
};
</script>
<style>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
}
li {
  margin: 5px;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: move;
}
.sortable-ghost {
  opacity: 0.4;
}
</style>

通过这种方式，可以更加灵活地在现代前端框架中使用 Sortable.js。

五、使用 PingCode 和 Worktile 进行项目管理

在项目开发中，合理的项目管理和团队协作工具是必不可少的。推荐使用 研发项目管理系统 PingCode 和 通用项目协作软件 Worktile。

1、PingCode

PingCode 是一款专为研发团队设计的项目管理系统，提供了强大的需求管理、任务管理、缺陷管理等功能。通过 PingCode，你可以：

高效管理需求和任务，确保项目进度和质量；
自动化工作流程，减少手动操作，提高工作效率；
实时数据统计和报表，帮助你全面掌控项目进展。

2、Worktile

Worktile 是一款通用的项目协作软件，适用于各种类型的团队。通过 Worktile，你可以：

灵活的任务管理，支持看板、甘特图等多种视图；
团队协作和沟通，通过评论、消息等功能实现无缝协作；
集成多种第三方工具，如 GitHub、Jenkins 等，提升工作效率。

六、总结

通过本文，你了解了如何通过 CDN、npm 安装和直接下载源代码的方式获取 Sortable.js，并详细介绍了每种方法的具体步骤和使用方式。同时，还介绍了如何将 Sortable.js 集成到项目中，并推荐了两款优秀的项目管理工具：研发项目管理系统 PingCode 和通用项目协作软件 Worktile。希望这些内容能帮助你更好地管理和开发项目，提高工作效率。