http://jquery-api-zh-cn.googlecode.com/svn/trunk/jQuery%20UI/draggable.html
<script type="text/javascript"> $(document).ready(function(){ $(".block").draggable({ //helper: "clone", //拖动时克隆,默认是 original //axis:"x", //定义拖动方向 containment:"#contain", //定义一个容器,div就只能在容器的范围内活动了 cursor: "move", //定义拖动时鼠标指针的状态 ,参数类型详见css中cursor配置 cursorAt:{top:10}, //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框,单位px opacity: 0.40, //设置对象被拖动时的透明度 handle: "div", //设置拖动控制器,也就是说当鼠标按住控制器的时候,才能拖动对象 scroll:false, //设置当拖动超出整个浏览器窗口,是否滚动浏览器 distance: 20, //设置当鼠标拖动多少像素时对象才会移动 //delay: 1000, //设置延迟时间 单位毫秒 grid:[50,50], //设置每次拖动的步进 单位px dragPrevention:['input', 'textarea', 'button', 'select', 'option'],//设置被拖动的div碰到那些dom元素时停止 start:function(e,ui){}, //开始拖动执行的函数 drag:function(e,ui){}, //拖动时执行的函数 stop:function(e,ui){} //拖动停止执行的函数 }).resizable(); $("#contain").draggable({ revert: true, //设置对象被拖动释放后时候回到原始位置 helper: "clone" }); }); </script><title>jQuery UI -- Draggable</title> </head> <body> <div id="contain"> <div class="block"> <div class="hendle" style="background: green">handle</div> </div> </div> ---------------------------------------------------------------- drag:function(e,ui){ if(...)ui.position.left=0; if(...)ui.position.top=0;//实现元素可拖动的区域 } ---------------------------------------------------------------- $('#dialog').draggable({handle:$('#title')});//title位于dialog内部,当拖title后dialog才会动!!! ----------------------------------------------------------------
源文:http://zhg-grj.spaces.live.com/Blog/cns!ADA1FB08E190EBF4!221.entry