jQuery UI报'Uncaught TypeError: draggable is not a function'错误如何解决

核心原因定位 #

你遇到的$(...).draggable is not a function报错，同时sortable功能正常，最常见的是以下两类问题：

• 你使用的是**自定义裁剪版jQuery UI：jQuery UI支持按功能模块自定义打包，如果你下载的定制版本仅勾选了sortable相关组件，未包含draggable模块，就会出现sortable可正常调用、draggable方法不存在的问题。
• 页面存在jQuery重复加载的情况：如果你在jQuery UI加载完成后，又再次引入了一次jQuery，新加载的jQuery会覆盖之前挂载了jQuery UI方法的原jQuery对象，导致draggable方法丢失。

排查&修复步骤 #

1. 确认jQuery UI的完整性：替换为完整版jQuery UI 1.12.1，避免裁剪版出现组件缺失问题
2. 检查资源加载顺序必须严格遵循：先加载jQuery 3.6.0，再加载jQuery UI，且加载完成后不要重复引入jQuery
3. 修正不符合规范的HTML结构：<tr>标签内必须嵌套<td>/<th>才能正常被DOM API和jQuery UI识别，你当前的HTML直接在tr内写文本属于不规范写法，会导致DOM渲染异常。

修正后可运行代码 #

HTML代码 #

<table>
  <tbody>
   <tr><td>1</td></tr>
   <tr><td>2</td></tr>
   <tr><td>3</td></tr>
   <tr><td>4</td></tr>
  </tbody>
 </table>

JS代码 #

$(function() {
    if (window.jQuery && window.jQuery.ui) {
        // 可先打印确认draggable是否存在，辅助排查
        console.log($.fn.draggable);
        $("tr").draggable({
            appendTo: "tbody",
            helper: "clone"
        });
    }
});

内容的提问来源于stack exchange，提问作者b_900