如何在没有限制的情况下在有限的区域内拖动对象

Question

我有一个项目管理系统

有一些div是甘特图，它们是可调整大小和可拖动的，我如何在Jquery可拖放的上的Jquery可拖式(红色潜水)上，从左侧和顶部创建一个边界或区域？

这是我的甘特手推车的照片：

​

红色潜水(作业)不能比他们的上级(项目)走得更左更高。，我不能用安全壳

(两个红色潜水是__，他们的父div (绿色div)是项目__)。

Answer 1

在文件中，它表示containment属性的可能值之一是定义边界框的数组。所以没必要装集装箱。

示例：活拷贝 (注意，“指南”div仅用于显示框的位置，它做的是而不是包含有界拖放)

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>Containment Example</title>
  <style>
    div {
      display: inline-block;
      border: 1px solid #aaa;
      box-sizing: border-box;
    }
    div.guide {
      position: absolute;
      border: 1px dotted black;
      left: 10px;
      top: 0px;
      width: 190px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="guide"></div>
  <div class="unbounded">I can go anywhere</div>
  <div class="bounded">I can only move around in the box
    <br>[10, 0] to [200, 200]</div>
  <script>
    $(".unbounded").draggable();
    $(".bounded").draggable({
      containment: [10, 0, 200, 200]
    });
  </script>
</body>
</html>