jquery-ui 之draggable详解

举一个例子：

<div class="box">

<div >

<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）;