jQuery UI-draggable参数介绍（1）
编写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;
}
#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>
