定义和用法

通过定义 draggable 区域的边界来约束每个 draggable 的运动,使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器

示例

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="IE=edge">	<title>draggable</title>	<link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css">	<style>		.draggable{			width: 90px;			height: 90px;			padding: 0.5em;			float: left;			margin: 0 10px 10px 0;			cursor: move		}		h3{			clear:left;		}		#containment-wrapper{			width:95%;			height: 450px;			border:2px solid #ccc;			padding:10px;		}	</style></head><body>	<h3>在DOM 元素中约束运动：</h3>	<div id="containment-wrapper">		<div id="draggable1" class="draggable ui-widget-content">			<p>我被约束在盒子里</p>		</div>		<div class="draggable ui-widget-content">			<p id="draggable2" class="ui-widget-header">我被约束在父元素内</p>		</div>	</div>	<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/external/jquery/jquery.js" type="text/javascript" ></script>	<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>	<script>		$("#draggable1").draggable({			containment:"#containment-wrapper",			scroll:false		});		$("#draggable2").draggable({containment:"parent"});	</script></body></html>