jQuery（...）。draggable不是一个函数

Question

我正在使用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 Tools，我不相信我正在使用它。

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

Answer 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>

Answer 2

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

关于如何做到这一点的Wordpress主题：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

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