Jquery 如何在没有限制的情况下在有限区域内拖动对象
我有一个项目管理系统 有一些div是甘特图，它们可以调整大小和拖动，如何从左上方创建边框或区域（限制）在Jquery UI上拖动，以显示红色 这是我的甘特购物车的图片： 红色潜水（作业）不得向左移动，且超过其上级（项目）我不能用遏制来做这件事 （两个红色的div是作业，它们的父div（绿色div）是项目），它表示Jquery 如何在没有限制的情况下在有限区域内拖动对象,jquery,project-management,gantt-chart,jquery-draggable,Jquery,Project Management,Gantt Chart,Jquery Draggable,我有一个项目管理系统 有一些div是甘特图，它们可以调整大小和拖动，如何从左上方创建边框或区域（限制）在Jquery UI上拖动，以显示红色 这是我的甘特购物车的图片： 红色潜水（作业）不得向左移动，且超过其上级（项目）我不能用遏制来做这件事 （两个红色的div是作业，它们的父div（绿色div）是项目），它表示包容属性的一个可能值是定义边界框的数组。所以不需要容器 示例：（请注意，“guide”div仅用于显示框所在的位置，它不包含有界draggable） 包容示例 div{ 显示：内联块
包容
包容示例
div{
显示：内联块；
边框：1px实心#aaa；
框大小：边框框；
}
分区向导{
位置：绝对位置；
边框：1px点黑色；
左：10px；
顶部：0px；
宽度：190px；
高度：200px；
}
我可以去任何地方
我只能在箱子里走动
[10,0]至[200200]
$（“.unbounded”）.draggable（）；
$（“.bounded”）.draggable({
安全壳：[10,0,200,200]
});
<!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>