<html>
<head></head>
<body>
<div>
<p>拽我!</p>
</div>
<div>
</div><!-- End container -->
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$( "#dragsource" ).draggable({
helper:"clone"
});
$("#container").droppable({
drop:function(event,ui){
$(this).append($("<p>clone</p>"));
}
});
})
</script>
</body>
</html>
拖动控制
到目前位置，所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。
拖动方向
默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下：
复制代码 代码如下:
<html>
<head></head>
<body>
<div>
<p>－－</p>
</div>
<div>
<p>|</p>
</div>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$("#dragX").draggable({axis:"x"});
$("#dragY").draggable({axis:"y"});
});
</script>
</body>
</html>
拖动范围
除了方向之外，还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window，Array是指定一个矩形区域（regin）的四元数组：[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制：
复制代码 代码如下:
<html>
<head></head>
<body>
<div>
<div>
<p>in parent</p>
</div>
<div>
<p>in regin</p>
</div>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$("#draggable1" ).draggable({containment: "parent" });
$("#draggable2").draggable({containment: [20,20,300,200] });
});
</script>
</body>
</html>
拖动吸附
还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素，使用grid参数指定吸附到网格，如下：
复制代码 代码如下:
<html>
<head>
<style>
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
</style>
</head>
<body>
<div>
<div>
<p>吸附到其他可拖拽元素</p>
</div>
<div>
<p>吸附到容器</p>
</div>
<div>
<p>吸附到网格(30x30)</p>
</div>
</div><!--container-->
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$("#draggable1").draggable({ snap: true });
$("#draggable2").draggable({ snap: "#container"});
$("#draggable3").draggable({grid: [30,30]});
});
</script>
</body>
</html>
拖动把手（handle）
默认是整个元素都可以拖动，也可以指定元素的某个子元素作为拖动的handle，如：
复制代码 代码如下:
<div>
<p>handle</p>
</div>
……
<script>
$("#draggable").draggable({handle:"p"});
</script>
Drop限制
默认的droppable指定元素能够接受所有的drop， 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如：
$(".selector").droppable({ accept: '.special' })
表示只接受具有special 样式的元素。
增强用户体验
前面是实现拖拽的功能，JQueryUI还有一些参数可以增强用户体验。比如，cursor参数可以指定鼠标指针的形状，cursorAt指定鼠标指针在source的相对位置，revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下：
复制代码 代码如下: