无法让JQuery Draggable插件工作？

我很新的JQuery我试图创建一个使用可拖动的插件样本页面。该网页加载正常，但我无法将我的<div>标签拖动到任何地方。我一直在试图复制这demo。这里是我的代码：无法让JQuery Draggable插件工作？

<!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>。任何人都可以看到我失踪的东西吗？

来源

2011-05-26 lhan

无法看到代码有任何问题，请确保您已按照Scott的建议包含了jQuery UI。同时检查控制台以确保页面中早期的javascript中没有错误。此外，如果您想限制#draggable div的拖动区域到它的父级，则使用'$（“＃draggable”）。draggable（{containment：'parent'}）;' – Dormouse 2011-05-26 19:55:00

谢谢。我现在补充说，它似乎没有什么区别。最终，虽然，这就是我想要的 - 拖动被包含到它的父'div'。 – lhan 2011-05-26 20:12:50

这只有在可拖动本身正在工作时才有效。 – Dormouse 2011-05-26 20:15:06

你在页面中包含了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>

来源

2011-05-26 19:47:45

我已经包括Jquery.js，Jquery.ui.core.js和jquery.ui.draggable.js。这听起来是对的吗？ – lhan 2011-05-26 19:51:57

这是一个*** [工作jsFiddle演示]（http://jsfiddle.net/DotNetScott/EV4e7/）***。 – 2011-05-26 19:52:36

@Lloyd：不，“draggable”模块依赖于'core'，'widget'和'mouse'模块，它们都必须加载。我建议加载整个jQuery UI，或者在http://jqueryui.com/download – DarthJDG 2011-05-26 19:54:06

对于它的价值，这是我的代码，我能得到工作。我只需要包含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>

来源

2011-05-26 20:56:42 lhan

下载完成JueryUI包从http://jqueryui.com/download其中应包括wizard.js，core.js，mouse.js和draggable.js，然后使用$（控制）.draggable（）使它工作。

来源

2012-07-19 04:56:05 nitin

无法让JQuery Draggable插件工作？

回答

相关问题