编写html代码，看了下draggable参数的各种效果。包括以下参数：
1。jQuery("#draggable").draggable();
2。jQuery("#draggable1").draggable({
cursorAt:{cursor:"move",top:56,left:56}}); jQuery("#draggable2").draggable({ cursorAt:{cursor:"crosshair",top:-5,left:-5}}); jQuery("#draggable3").draggable({ cursorAt:{bottom:0}});解释：cursorAt：弄不太明白
3。jQuery("#draggable4").draggable({
containment:"#containment-fieldset",scroll:false});解释：仅可以在id为containment-fieldset的容器内拖拽，即containment参数限制在某个限定的区域内实现拖拽
4。jQuery("#draggable5").draggable({
axis:"y"}); jQuery("#draggable6").draggable({ axis:"x"});解释：限制仅X,Y轴上可拖拽，axis:"y"：限制仅可在Y轴上可拖拽，axis:"x"：限制仅可在X轴上可拖拽。
5。jQuery("#draggable7").draggable({
distance:20}); jQuery("#draggable8").draggable({ delay:1000});解释：延时移动。distance:20:移动20个像素开始拖动。delay:1000:延迟1秒开始拖动
6。jQuery("#draggable9").draggable({
revert:true}); jQuery("#draggable10").draggable({ revert:true,helper:"clone"});解释：恢复到原始位置。revert:true 设置为恢复到原始位置，revert:true,helper:"clone"同上功能加helper:'clone' 复制拖动
7。jQuery("#draggable11").draggable({
handle:"p"}); jQuery("#draggable12").draggable({ cancel:"p.ui-widget-header"});解释：拖动点设置。handle设置实现拖动位置，cancel设置限制拖动位置
代码如下：（全部html代码复制，添加上jQuery draggable的库文件即可直接运行，看效果。）
<html>
<head> <link rel = "stylesheet" href = "jquery.ui.all.css"> <script type = "text/javascript" src = "jquery-1.4.2.min.js"></script> <script type = "text/javascript" src = "jquery.ui.core.js"></script> <script type = "text/javascript" src = "jquery.ui.widget.js"></script> <script type = "text/javascript" src = "jquery.ui.mouse.js"></script> <script type = "text/javascript" src = "jquery.ui.draggable.js"></script> <link rel = "stylesheet" href = "demos.css"> <script type = "text/javascript"> jQuery(document).ready(function(){ jQuery("#draggable").draggable(); jQuery("#draggable1").draggable({ cursorAt:{cursor:"move",top:56,left:56}}); jQuery("#draggable2").draggable({ cursorAt:{cursor:"crosshair",top:-5,left:-5}}); jQuery("#draggable3").draggable({ cursorAt:{bottom:0}}); //在某个限定的区域内可拖拽 jQuery("#draggable4").draggable({ containment:"#containment-fieldset",scroll:false}); //限制仅X,Y轴上可拖拽 jQuery("#draggable5").draggable({ axis:"y"}); jQuery("#draggable6").draggable({ axis:"x"}); //拖拽延时 distance:20:移动20个像素开始拖动。delay:1000:延迟1秒开始拖动 jQuery("#draggable7").draggable({ distance:20}); jQuery("#draggable8").draggable({ delay:1000}); //可恢复到原位的拖拽 jQuery("#draggable9").draggable({ revert:true}); jQuery("#draggable10").draggable({ revert:true,helper:"clone"}); //div内点击某范围可拖拽，点击其它范围不可拖拽。 jQuery("#draggable11").draggable({ handle:"p"}); jQuery("#draggable12").draggable({ cancel:"p.ui-widget-header"}); }); </script> <style> #draggable{ width:150px; height:150px; padding:0.5em;//不知道此CSS是何意思的，参见本人上篇日志。关于padding:0.5em; } #draggable1,#draggable2,#draggable3{ width:150px; height:150px; padding:0.5em; float:left; margin:0px 10px 10px 0px; } #draggable4{ width:150px; height:150px; padding:0.5em; } #draggable5,#draggable6{ width:150px; height:150px; padding:0.5em; float:left; margin:0px 10px 10px 0; } #draggable7,#draggable8{ width:150px; height:150px; padding:0.5em; float:left; margin:0px 10px 10px 0px; } #draggable9,#draggable10{ width:150px; height:150px; padding:0.5em; float:left; margin:0px 10px 10px 0px; } #draggable11,#draggable12{ width:150px; height:150px; padding:0.5em; float:left; margin:0px 10px 10px 0px; } </style> </head> <body> <div class = "demo"> <fieldset> <legend>普通客拖拽div</legend> <div id = "draggable" class = "ui-widget-content"> <p>drag me around</p> </div> </fieldset> <fieldset> <legend>cursorAt</legend> <div> <p>当开始移动时，鼠标定位在的某个位置上（最多两个方向）。可选值：{top,left,right,bottom}</p> </div> <div id = "draggable1" class = "ui-widget-content"> <p></p> </div> <div id = "draggable2" class = "ui-widget-content"> <p></p> </div> <div id = "draggable3" class = "ui-widget-content"> <p></p> </div> </fieldset> <fieldset id = "containment-fieldset"> <legend>限定在一个范围内拖拽-containment</legend> <div id = "draggable4" class = "ui-widget-content"> <p>在fieldset内可拖拽<p> </div> </fieldset> <fieldset> <legend>仅可在x轴和y轴拖拽的限定-axis</legend> <div id = "draggable5" class = "ui-widget-content"> <p>仅Y轴可拖拽</p> </div> <div id = "draggable6" class = "ui-widget-content"> <p>仅X轴可拖拽</p> </div> </fieldset> <fieldset> <legend>延时的拖拽</legend> <div id = "draggable7" class = "ui-widget-content"> <p>distance:20:移动20个像素开始拖动</p> </div> <div id = "draggable8" class = "ui-widget-content"> <p>delay:1000:延迟1秒开始拖动</p> </div> </fieldset> <fieldset> <legend>revert</legend> <div id = "draggable9" class = "ui-widget-content"> <p>拖拽后恢复到原位置</p> </div> <div id = "draggable10" class = "ui-widget-content"> <p>复制拖动，并恢复到原位</p> </div> </fieldset> <fieldset> <legend>div内限制点击某处可拖拽，点击其它地方不可拖拽</legend> <div id = "draggable11" class = "ui-widget-content"> <p class = "ui-widget-header" align = "center">仅点击此处可拖拽</p> </div> <div id = "draggable12" class = "ui-widget-content"> <p align = "center">可点击我进行div拖拽</p> <p class = "ui-widget-header" align = "center">点击此处拖拽无效</p> </div> </fieldset> </div> </body></html>
PS：上述代码中，蓝色部分是运行此代码必须导入的JS和CSS文件。