在其父级中保留一个可拖动的 div答案

【问题标题】：Keep a draggable div inside its parent在其父级中保留一个可拖动的 div
【发布时间】：2012-07-31 15:41:12
【问题描述】：

我有一个可拖动的 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>

如何限制子级在父级中的位置和大小。

【问题讨论】：

标签： jquery html tags position limit

【解决方案1】：

这是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>

【讨论】：

这不再有效。它会回复过时的东西吗？

【解决方案2】：

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

【讨论】：