Divi网站jQuery Draggable功能失效，寻求技术解决方案

排查步骤与解决方案 #

1. 修复jQuery版本冲突 #

Divi主题自带jQuery，你额外引入的外部jQuery版本会和内置版本冲突，导致draggable()方法无法正常绑定。

解决方法：
移除HEAD中手动添加的外部jQuery引用，仅保留jQuery UI的样式与脚本：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

2. 适配Divi的jQuery安全模式 #

Divi默认启用jQuery的noConflict()模式，直接用$可能无法调用jQuery方法，需改用jQuery或在自执行函数中映射$：

jQuery(function($) {
    $("div.drag-me").draggable();
});

3. 排除样式干扰 #

Divi模块自带的CSS属性（如pointer-events: none、过低的z-index）可能阻止拖动，可临时添加以下CSS测试：

.drag-me {
    pointer-events: auto !important;
    z-index: 9999 !important;
    cursor: move !important;
}

若恢复拖动，再逐步排查原样式中的冲突属性。

4. 确认脚本加载时机 #

将页面脚本放在</body>标签前，确保DOM完全渲染后再执行绑定逻辑，避免元素未加载时执行代码。

验证方法 #

1. 清除浏览器缓存后刷新页面
2. 打开浏览器开发者工具（F12）的Console标签，查看是否有draggable is not a function这类报错
3. 在Console中手动执行jQuery("div.drag-me").draggable()，测试能否正常初始化拖动功能

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