拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下：
$(selector). draggable({options})
options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖曳插件</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div id="x" class="drag">沿x轴拖拽</div> <div id="y" class="drag">沿y轴拖拽</div> </div> <script type="text/javascript"> $(function () { $("#x").draggable({containment:"parent",axis: "x"}) $("#y").draggable({containment:"parent",axis:"y"}) }); </script> </body> </html>
原文：http://www.cnblogs.com/jlj9520/p/5279453.html