預設設定值：

$.extend($.ui.draggable, {

version: “1.7.1″,

eventPrefix: “drag”,

defaults: {

addClasses: true,

appendTo: “parent”,

axis: false,

cancel: “:input,option”,

connectToSortable: false,

containment: false,

cursor: “auto”,

cursorAt: false,

delay: 0,

distance: 1,

grid: false,

handle: false,

helper: “original”,

iframeFix: false,

opacity: false,

refreshPositions: false,

revert: false,

revertDuration: 500,

scope: “default”,

scroll: true,

scrollSensitivity: 20,

scrollSpeed: 20,

snap: false,

snapMode: “both”,

snapTolerance: 20,

stack: false,

zIndex: false

}

});

============================================================

Default：

$(”#draggable”).draggable();

============================================================

events：

var $start_counter = $(’#event-start’), $drag_counter = $(’#event-drag’), $stop_counter = $(’#event-stop’);

var counts = [0,0,0];

$(”#draggable”).draggable({

start: function() {

counts[0]++;

updateCounterStatus($start_counter,counts[0]);

},

drag: function() {

counts[1]++;

updateCounterStatus($drag_counter,counts[1]);

},

stop: function() {

counts[2]++;

updateCounterStatus($stop_counter,counts[2]);

}

});

});

function updateCounterStatus($event_counter,new_count) {

// first update the status visually…

if (!$event_counter.hasClass(’ui-state-hover’)) {

$event_counter.addClass(’ui-state-hover’)

.siblings().removeClass(’ui-state-hover’);

}

// …then update the numbers

$(’span.count’,$event_counter).text(new_count);

============================================================

constrain-movement(限制範圍移動)：

$(”#draggable”).draggable({ axis: ‘y’ });  //限制y軸

$(”#draggable2″).draggable({ axis: ‘x’ }); //限制x軸

$(”#draggable3″).draggable({ containment: ‘#containment-wrapper’, scroll: false }); //不出現滾動條

$(”#draggable4″).draggable({ containment: ‘#demo-frame’ });

$(”#draggable5″).draggable({ containment: ‘parent’ }); //限制在父系框架中

============================================================

delay-start(延時移動)：

$(”#draggable”).draggable({ distance: 20 }); //移動20畫素開始拖動

$(”#draggable2″).draggable({ delay: 1000 });//延遲1秒後開始拖動

============================================================

snap-to (吸附移動)：

$(”#draggable”).draggable({ snap: true }); //預設，任何方式吸附

$(”#draggable2″).draggable({ snap: ‘.ui-widget-header’ }); //以某元素的內外徑吸附

$(”#draggable3″).draggable({ snap: ‘.ui-widget-header’, snapMode: ‘outer’ }); //以某元素外徑吸附,吸附方式:本上吸其下，本下吸其上. 內徑吸附：inner, 吸附方式:相反

$(”#draggable4″).draggable({ grid: [20,20] });//以一定距離移動

$(”#draggable5″).draggable({ grid: [80, 80] });

============================================================

scroll：

$(”#draggable”).draggable({ scroll: true });

$(”#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 });  //滾動條敏感度

$(”#draggable3″).draggable({ scroll: true, scrollSpeed: 100 });  //滾動速度

============================================================

revert position(恢復到原始位置)：

$(”#draggable”).draggable({ revert: true });     //revert:true 設定為恢復到位置

$(”#draggable2″).draggable({ revert: true, helper: ‘clone’ });              //helper:’clone’ 複製拖動

============================================================

visualfeedback (視覺效果)：

$(”#draggable”).draggable({ helper: ‘original’ });  //設定不復制(初始化設定)

$(”#draggable2″).draggable({ opacity: 0.7, helper: ‘clone’ }); //opacity設定透明度,並克隆元素

$(”#draggable3″).draggable({

cursor: ‘move’, //設定滑鼠圖形

cursorAt: { top: -12, left: -20 }, //位置定位座標設定

helper: function(event) {

return $(’<div class=”ui-widget-header”>I/’m a custom helper</div>’);

} //新建提示元素,上面設定其以滑鼠定位位置值

});

$(”#set div”).draggable({ stack: { group: ‘#set div’, min: -1 } });//群組設定拖動,並且最後新增的元素疊加到該群組的最上面.適合做許願板效果。

============================================================

Drag handle (拖動點設定)：

$(”#draggable”).draggable({ handle: ‘p’ }); //handle設定實現拖動位置

$(”#draggable2″).draggable({ cancel: “p.ui-widget-header” }); //cancel設定限制拖動位置

============================================================

Cursor style (滑鼠樣式)：

$(”#draggable”).draggable({ cursorAt: { cursor: ‘move’, top: 56, left: 56 } }); //cursor設定滑鼠樣式, top、left、right、bottom設定元素相對滑鼠的定位點

$(”#draggable2″).draggable({ cursorAt: { cursor: ‘crosshair’, top: -5, left: -5 } });

$(”#draggable3″).draggable({ cursorAt: { bottom: 0 } });

===========================================================

Cursor style (滑鼠樣式)：

$(”#draggable”).draggable({ cursorAt: { cursor: ‘move’, top: 56, left: 56 } }); //cursor設定滑鼠樣式, top、left、right、bottom設定元素相對滑鼠的定位點

============================================================

Draggable+sortable：

$(”#sortable”).sortable({

revert: true

});

$(”#draggable”).draggable({

connectToSortable: ‘#sortable’, //設定拖動加入到其他列表中

helper: ‘clone’,

revert: ‘invalid’

});