jQuery(...).draggable 不是一个函数

Posted 2023-05-08

【中文标题】jQuery(...).draggable 不是一个函数

【英文标题】：jQuery(...).draggable is not a function

【发布时间】：2018-06-01 18:54:50

【问题描述】：

我正在使用我在 previous SO question 上找到的帮助创建带有图像的地图。

虽然使用 jQuery UI 的修复在 JS Fiddle 中运行良好，但当我在实际站点上尝试时它不起作用。相反，我得到的是

jQuery.Deferred exception: jQuery(...).draggable is not a function
TypeError: jQuery(...).draggable is not a function

我实际上是在获取该 JS Fiddle 的内容并将其添加到我的网站，因此问题可能在于我如何链接到 jQuery/jQuery UI 文件。

编辑：我已经更新了 jQuery 链接以完全匹配上面 JSfiddle 中使用的版本。

<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>

another thread 已经提出并回答了这个问题，但是这个问题引用了 jQuery 工具，我不相信我正在使用它。

编辑 2：我能够在空白 html 文件上重新创建地图，所以我想知道这是否与我当前的网站设置有关。我正在使用 Wordpress，但不知道任何 WP/jQuery UI 特定问题。

【问题讨论】：

如果您的网站是通过 HTTPS 发布的，则仅使用对外部资产（脚本、css、...）的 HTTPS 引用。你有 jquery 通过 HTTPS 和 jquery-ui 通过 HTTP

@beaver 谢谢，该站点目前实际上是使用 MAMP 存储在本地的。但其他需要 jQuery 的元素运行正常。

在你的站点代码中jquery是第一个脚本吗？

@beaver 是的，jQuery 首先是 jQuery UI。然后引导等...

我认为您的网站有更多 jquery.js 或 jquery-ui.js（或 min.js），包括 jQuery 两次会导致此问题。在浏览器中检查你的 js 文件。

【参考方案1】：

jQuery(document).ready(function() 
    jQuery("#map").draggable(); 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="range">
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/127459-200.png" id="map" />
</div>

试试这个

如果不按照jquery版本加载jqueryui也会出现这个问题

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

【讨论】：

谢谢，但这对我不起作用。我已经更新了问题以强调我现在已经更改了 jQuery 和 jQuery UI 版本以完全复制 JSFiddle，因为我们知道这是有效的。但我仍然无法复制它。

感谢您的持续努力。虽然感谢您重新创建它，但当我尝试在我的页面上实现它时它仍然无法正常工作。

TypeError: jQuery(...).draggable is not a function

请您解释一下您的意思，这不是我们已经拥有的吗？

【参考方案2】：

我发现问题在于我只是正常链接到 jQuery UI，就像在没有 CMS 的网站上一样。但是，随着网站是在 Wordpress 上构建的，我应该正确地将脚本排入队列。

有关如何执行此操作的 Wordpress 主题：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

虽然在构建的这个阶段为了简单起见，并且为了澄清它的工作原理，我使用了这个插件：https://wordpress.org/plugins/enqueue-me/

【讨论】：

感谢添加了正确的标签“wordpress”，这在这种情况下非常重要