無法讓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插件工作？

回答

相關問題