在另一个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

回答

相关问题