<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../public/js/jquery-1.8.3.js"></script>
<script src="../public/js/jquery-ui-1.10.4.custom.js"></script>
<script src="../public/js/jquery-ui.js"></script>
<title>限制移动范围的拖放功能</title>
<style type="text/css">
.draggable{width: 150px;height: 150px;background-color: #990}
#contain{margin-left:20px;margin-bottom:20px; width:200px;height:200px;background-color: blue;}
#parent{margin-left:20px;margin-bottom:20px; width:500px;height:500px;background-color:red;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#draggable").draggable({axis:"y"});//仅可以垂直拖动的盒子
$("#draggable2").draggable({axis:"x"});//仅可以水平拖动的盒子
//只能在容器contain内部拖动的盒子
$("#draggable3").draggable({containment:"#contain",scroll:false});
//在当前盒子的父控件中可以拖动盒子
$("#draggable4").draggable({containment:"parent"});
});
</script>
</head>
<body>
<div id="parent">
parent控件
<div id="draggable" class="ui-widget-content draggable">
<p>仅可以垂直拖动的盒子</p>
</div>
<div id="draggable2" class="ui-widget-content draggable">
<p>仅可以水平拖动的盒子</p>
</div>
<div id="draggable4" class="ui-widget-content draggable">
<p>在当前盒子的父控件中可以拖动盒子</p>
</div>
<div id="contain">
contain
<div id="draggable3" class="ui-widget-content draggable">
<p>只能在容器contain内部拖动的盒子</p>
</div>
</div>
</div>
</body>
</html>原文：http://blog.csdn.net/colorsunlight/article/details/44651801