无法让 JQuery Draggable 插件工作？答案

【问题标题】：Can't get JQuery Draggable plugin to work?无法让 JQuery Draggable 插件工作？
【发布时间】：2011-05-26 19:46:54
【问题描述】：

我对@987654322@ 很陌生，我正在尝试使用 Draggable 插件创建一个示例页面。页面加载正常，但我无法将我的 <div> 标签拖到任何地方。我一直在尝试复制这个demo。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title></title>
         <style type="text/css">
                #draggable { width: 150px; height: 150px; padding: 0.5em;  border: solid 1px black; cursor:pointer;}
         </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>


            <script src="scripts/jquery.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.core.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.draggable.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.mouse.js" type="text/javascript"/>
            <script src="scripts/jquery.ui.widget.js" type="text/javascript"/>
            <script src="scripts/jquery-ui-1.8.13.custom.js" type="text/javascript" />

            <script type="text/javascript">
                $(document).ready(function() {
                    $("#draggable").draggable();
                });
            </script>


            <div class="demo" style="height: 500px; width: 500px;">
                <div id="draggable">
                    <p>Drag me around</p>
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>

我只是想实现它，这样我就可以在它周围的“演示”<div> 中拖动我的“可拖动”<div>。谁能看到我错过了什么？

【问题讨论】：

看不到代码有任何问题，请确保您已按照 Scott 的建议包含 jQuery UI。还要检查控制台以确保页面前面的 javascript 中没有错误。此外，如果您想将#draggable div 的拖动区域限制为其父级，请使用$("#draggable").draggable({containment: 'parent'});
谢谢。我现在已经添加了它，但它似乎仍然没有任何区别。但最终，这就是我想要的 - 将拖动包含到它的父级 div。
只有在可拖动本身工作时才有效。
我知道，我想通了。只是想包括它以防万一:)

标签： jquery jquery-ui drag-and-drop draggable jquery-ui-draggable

【解决方案1】：

您是否在页面中包含了 jQuery UI 脚本？ Here is CDN link to the latest versions.

我使用Html5Boilerplate 最佳实践：

    </form>

    <!-- Javascript at the bottom for fast page loading -->

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js" type="text/javascript"></script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.6.1.js">\x3C/script>')</script>

    <!-- Grab Google CDN's jQuery UI, with a protocol relative URL; fall back to local if necessary -->
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript"> $.ui || document.write('<script src="js/libs/jquery-ui-1.8.12.custom.min.js">\x3C/script>')</script>

    <!-- Scripts concatenated -->
    <script src="js/plugins.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <!-- End scripts -->

</body>

【讨论】：

我已经包含了 Jquery.js、Jquery.ui.core.js 和 jquery.ui.draggable.js。听起来对吗？
@Lloyd：不，draggable 模块依赖于core、widget 和mouse 模块，它们都必须加载。我建议要么加载整个 jQuery UI，要么在jqueryui.com/download 自己构建一个自定义包
我不知道你有什么文件，但我会参考 CDN 上的文件，例如：<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" />
@DarthJDG：谢谢，我已经编辑了我的帖子以包含我在这个页面上的所有代码。我添加了要包含的widget 和mouse 模块，但仍然没有运气。你能看出我做错了什么吗？
@Lloyd - 将 draggable.js 放在最后，不确定是否重要。

【解决方案2】：

对于它的价值，这是我能够开始工作的代码。我只需要包含 2 个 javascript 文件（其中一个我已经包含，另一个 jquery-ui.js 来自here，感谢@Scott！）。此外，@DarthJDG 是正确的，顺序 DOES 很重要。如果我切换两个脚本标签的顺序，分页符。我只包含了标签，因为其他一切都保持不变。再次感谢大家为我指出正确的方向。这是我的代码：

<body>
    <form id="form1" runat="server">
        <div>

            <%--came from http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js--%> 
            <script src="scripts/jquery.js" type="text/javascript"></script>

            <%--came from //ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.js--%>
            <script src="scripts/jquery-ui.js" type="text/javascript" ></script>

            <script type="text/javascript">
                $(document).ready(function() {
                    $("#draggable").draggable({ containment: 'parent' });
                });
            </script>


            <div class="demo" style="height: 500px; width: 500px;">
                <div id="draggable">
                    <p>Drag me around</p>
                </div>
            </div>
        </div>
    </form>
</body>

【讨论】：

【解决方案3】：

从http://jqueryui.com/download 下载完整的 JueryUI 包，其中应包括wizard.js、core.js、mouse.js 和draggable.js，然后使用$(control).draggable() 使其工作。

【讨论】：