舉一個例子:css
<div class="box">jquery
<div id="draggable">瀏覽器
<p>Drag me around</p>ui
<a class="test">notDrag me</a>this
</div>spa
</div>插件
使用方法:對象
$( "#draggable" ).draggable(); 事件
注意:使用以前要加上 jquery 和 jquery-ui 兩個類庫。ci
注意: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);