SortableJS CDN加载后无法正常使用，提示sortable is not a function怎么办？

Question

SortableJS通过CDN加载后提示“sortable is not a function”？可能是加载顺序错误或版本冲突导致，如何解决这一常见问题？

Answer 1

1. 问题概述

当使用 SortableJS 并通过 CDN 加载时，如果遇到“sortable is not a function”的错误提示，通常是因为加载顺序错误或版本冲突引起的。以下将从常见技术问题、分析过程和解决方案等方面进行深入探讨。

常见现象：

• 错误信息：“Uncaught TypeError: sortable is not a function”。
• 代码中调用 new Sortable() 方法时失败。
• 确保 CDN 链接正确加载但仍报错。

2. 分析过程

为了准确定位问题，我们需要逐步排查以下几个方面：

1. 检查加载顺序： 确保 SortableJS 的 CDN 脚本在 HTML 文件中被正确加载，并且位于其他依赖脚本之前。
2. 验证版本兼容性： 如果项目中同时加载了多个版本的 SortableJS 或相关库（如 Vue.Draggable），可能会导致冲突。
3. 确认全局变量： 检查浏览器控制台中是否可以通过 window.Sortable 访问到该对象。

步骤	操作	预期结果
1	打开开发者工具，输入 window.Sortable	返回一个函数对象
2	查看页面中的所有 <script> 标签	确保 SortableJS 的 CDN 在其他脚本之前加载

3. 解决方案

根据上述分析，以下是几种常见的解决方法：

3.1 调整加载顺序

确保 SortableJS 的 CDN 脚本优先加载。例如：

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    const el = document.getElementById('myList');
    new Sortable(el, { group: "shared" });
</script>

3.2 使用模块化方式加载

如果项目使用了模块化构建工具（如 Webpack 或 Vite），可以通过 ES6 模块导入方式避免全局污染：

import Sortable from 'sortablejs';
const el = document.getElementById('myList');
new Sortable(el, { group: "shared" });

3.3 排查版本冲突

如果项目中存在多个版本的 SortableJS 或类似功能库，可能导致命名空间冲突。可以尝试：

• 明确指定需要使用的版本号（例如 https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js）。
• 通过别名方式区分不同版本的库。

4. 进阶优化

对于更复杂的场景，可以结合流程图进一步说明如何系统化地解决问题：

graph TD
            A[加载 SortableJS] --> B{是否加载成功？}
            B --否--> C[检查网络请求]
            B --是--> D{是否与其他库冲突？}
            D --是--> E[调整版本或隔离命名空间]
            D --否--> F[检查初始化代码]

此外，还可以利用调试工具（如 Chrome DevTools）对脚本执行过程进行跟踪，确保每一步都符合预期。