Laravel项目使用jQuery时出现draggable is not a function报错如何解决

问题原因 #

$(...).draggable is not a function 本质是jQuery UI的拖拽方法没有正确挂载到当前使用的jQuery实例上，按照以下步骤逐一排查即可：

排查解决步骤 #

• 检查是否重复加载jQuery
  Laravel项目的公共布局文件（如resources/views/layouts/app.blade.php）通常会默认引入一次jQuery，如果当前子页面又重复引入了jquery-3.6.0.js，后加载的jQuery会覆盖已经挂载了jQuery UI方法的实例，导致方法丢失。删除重复的jQuery引入即可解决90%以上的同类问题。
• 验证jQuery UI文件有效性
  打开浏览器开发者工具的「网络」面板，查看jquery-ui.js的请求状态：
  • 如果请求返回404，说明asset()路径配置错误，调整资源路径保证文件正常加载
  • 如果请求正常，检查jQuery UI版本兼容性：你使用的jQuery 3.6.0需要搭配jQuery UI 1.12及以上版本，旧版jQuery UI不兼容jQuery 3.x，会出现方法挂载失败的问题
• 解决JS加载顺序/冲突问题
  如果你项目中存在其他使用$符号的JS库（如Zepto），或者有异步加载的脚本打乱了加载顺序，可以修改代码用全拼jQuery替代$调用，避免冲突：

  jQuery(document).ready(function() {
    jQuery(".box").draggable({
      containment: "#containment-wrapper"
    }).resizable({
      containment: "#containment-wrapper"
    });
  });
  

  也可以给jQuery、jQuery UI的script标签加上defer属性，保证脚本按顺序加载完成后再执行业务代码。

快速验证方法 #

打开浏览器控制台，输入console.log($.fn.draggable)，如果输出undefined即可确认是jQuery UI未正确挂载，按照上述步骤排查即可。

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