在另一個div內創建一個可拖動的div

我想創建一個可拖動的div，它位於更大的div內。這是我的程序。但它不工作。我想可拖動函數是使用一個div可拖動的函數。也是我必須使用的版本？ 1.7.2或1.3.2？在另一個div內創建一個可拖動的div

<!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> 
     <title>First jQuery-Enabled Page</title> 
     <style type="text/css"> 
      #draggable { 
       background-color:blue; 
       width: 150px; 
       height: 150px; 
       padding: 0.5em; 
      } 
     </style> 
     <script type="text/javascript" src="jquery-ui-1.8.21.custom.min"></script> 
     <script type="text/javascript"> 
      $(function() { 

       $("#draggable").draggable(); 
      }); 
     </script> 
    </head> 

    <body> 
     <div id="draggable"> 
      <p>hai</p> 
     </div> 
    </body> 

</html>

來源

2012-07-20 Bhavin Bhaskaran

我認爲你的javascript應該如下;

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#draggable").draggable(); 

    }); 

</script>

希望這有助於

來源

2012-07-20 06:45:00 mithilatw

'$（function）'相當於'$（document）.ready（function）' – Musa 2012-07-20 06:48:25

我試圖修改代碼，並在這裏生產工作的例子：http://jsfiddle.net/mUa3r/

本質上有你的盒子拖動和容器的約束，使用{containment: parent}，如描述爲here。

更新：（因爲該鏈接不爲你工作）

腳本：

<script> 
      $(function() { 
      $("#draggable").draggable({containment: "parent" }); 
    }); 
    </script>

HTML：

<div id="container"> 
      <div id="draggable"> 
        <p>hai</p> 
      </div> 
    </div>

CSS：

#container {background-color:grey; width: 300px; height: 300px;} 
    #draggable {background-color:blue; width: 150px; height: 150px; padding: 0.5em;}

希望這有助於！

來源

2012-07-20 06:49:34

你可以把代碼放在這裏嗎？我無法看到給定鏈接中的代碼。 – 2012-07-20 08:22:36

在另一個div內創建一個可拖動的div

回答

相關問題