부모 내에서 draggable div를 유지하십시오.

나는 draggable div 태그가 있습니다. 부모로부터 오버 플로우하지 않을 div를 드래그하는 동안을 좋아합니다.부모 내에서 draggable 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

너무 감사합니다. 유진 H –

여기에는 다른 드래그 가능한 요소 안에 드래그 가능한 요소로 구성된 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

부모 내에서 draggable div를 유지하십시오.

답변

관련 문제