jquery-ui 之draggable详解
举一个例子：
<div class="box">
<div id="draggable">
<p>Drag me around</p>
<a class="test">notDrag me</a>
</div>
</div>
使用方法：
$( "#draggable" ).draggable();
注意：使用之前要加上 jquery 和 jquery-ui 两个类库。
注意：jquery 2.0以上不支持ie6 7 8 ，所以想让所以浏览器都支持插件中的东西，请使用jquery2.0以下的版本。
(一)具体参数的解释：
1 zIndex: 100 //表示拖动的时候给拖动的标签加上的z-index值，不拖动的时候，z-index值还原。
2 containment: "parent" //表示移动的范围是针对 父级元素，不会超过父级元素。
containment: ".box" //表示移动的范围是在 box 的内部，不会在box外部移动。
3 axis: "x", //表示只可以在x轴上移动
axis: "y" //表示只可以在y轴上移动。
4 cancel: ".test" //表示取消 class="test" 标签的拖拽
5 cursor: "pointer" //标签拖动的时候，鼠标的状态。
6 delay: "300" //表示拖动的时候，拖动延迟。
7 disabled: "false" //表示是禁止或是执行。
8 opacity: 0.5 //表示拖动的时候，调整透明度
9 addClass: false //表示是否添加class
10 revert: true //表示 停止的时候是否回到初始的位置；
11 revertDuration: 200 //表示停止的时候回到默认设置的时间
使用方法：
$("#draggable").draggable(function(){
zIndex:100,
containment:"parent",
axis:"x",
cancel:".test",
......
});
（二）具体事件的解释：
create: function(event,ui){ //创建的时候，执行的方法, 比如添加css或是别的。
//ui.position 表示相对当前对象，鼠标的坐标值对象{top,left}
//ui.offset 表示相对于当前页面，鼠标的坐标值对象{top,left}
}
drag: function(){ //拖拽的时候，执行的方法, 比如添加css或是别的。
}
start:function(){ //开始的时候，执行的方法 ，比如添加css或是别的。
}
stop:function(){ //停止的时候, 执行的方法，比如移除css或是别的。
}
具体的使用事件的方法：
$("#draggable").draggable(function(){
create:function(){
$(this).addClass("cur");
},
drag:function(){
$(this).addClass("active");
},
start:function(){
$(this).addClass("active");
},
stop:function(){
$(this).removeClass("active");
}
});
（三）具体方法的解释：
destory 删除拖拽功能，
disable 拖动禁用
enable 拖动使用
option
widget
具体的使用事件的方法：
$("#draggable").draggable(destory）;
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
