jQuery UI draggabe 未定义

Question

我正在尝试使用 jquery UI 功能创建一个流星应用程序。 但是我无法让它工作。流星应用程序框架工作正常，但是一旦我开始使用 jQuery UI，就会出现如下错误：

$("#draggable1").draggable is not a function

在 Firebug 控制台中。

我尝试了多种方式包含 jquery 和 jquery UI 包：

1. 添加了 jquery 包
2. 在本地引用 jquery 和 jquery UI，来自我的流星应用文件夹中的文件夹 \client\js\libs
3. 只有client\js\libs 中的文件，没有在我的html 文件中引用它们。
4. 在我的 html 文件中引用了 jQuery 和 jQuery UI 的 CDN 版本

根据萤火虫的说法，在每种情况下，javascript 文件似乎都可以正常加载。但是像下面这样的代码根本不起作用（在我的 3views.js 文件中——3views 是我的流星应用程序的名称）：

if (Meteor.is_client) {

    $( "#draggable1" ).draggable({ revert: "invalid", snap: ".ui-widget-header", snapMode: "inner", snapTolerance: 100 });

...

在我的 3views.html 中：

...
<div id="draggable1" class="ui-widgetc-content draggable_box">
<img id="imgpair1" src="objects/obj_pair1a.png" class="objectpair">
</div>
...

使用 jQuery UI 小部件的正确方法是什么？

Answer 1

可能您的库版本没有可拖动小部件。转到download builder 并包含它。

另外，请检查您是否先包含 jquery，然后再包含 jqueryui 的脚本。

喜欢..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>