在其父代中保留一個可拖動的div

我有一個可拖動的div標籤。而且我希望當我拖動這個不會從其父項溢出的div時。在其父代中保留一個可拖動的div

<script> 
$('.children').resizeable().draggable();//from jquerUI 
</script> 
<style> 
.parent{ 
    overflow: hidden; 
    position: relative; 
    width: 1000px; 
    height: 1000px; 
} 
.children{ 
    width: 100px; 
    height: 100px; 
    position: absolute; 
} 

</style> 
<div class="parent"> 
    <div class="children"><div> 
</div>

我該如何保持，限制孩子在父母的位置和大小。因爲我的英語不好。

來源

2012-08-02 Trần Minh

$('.children').draggable({ containment: "parent" });

來源

2012-08-02 16:08:55

非常感謝Eugene H – 2012-08-02 16:15:30

這裏的a complete working demo是另一個可拖動元素內的可拖動元素。

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#draggable1").draggable({containment: "parent"}); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content draggable"> 
    <p>Drag me around</p> 
    <div id="draggable1" class="ui-widget-content draggable"> 
    <p>Drag me around</p> 
    </div> 
</div> 


</body> 
</html>

來源

2013-03-09 20:01:36

在其父代中保留一個可拖動的div

回答

相關問題