Question

我有一个项目管理系统

有一些div是甘特图，它们是可调整大小和可拖动的，如何在 （限制）创建边框或区域> 红色潜水的Jquery UI可拖动？

这是我的甘特推车的图片： gantt chart

红色潜水（工作）不得离开他们的父母（项目）。 我无法控制遏制

（两次红色潜水职业，他们的父级div（绿色div）是项目）

Answer 1

In the documentation，它表示containment属性的一个可能值是定义边界框的数组。所以没有必要的容器。

示例：Live Copy （请注意，＆＃34;指南＆＃34; 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>

如何在没有包含的情况下在有限区域中拖动对象

1 个答案: