舉一個例子：
<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）;