Draggable
庫文件：ui/ui.core.js、ui/ui.draggable.js
============================================================
Default：
$(”#draggable”).draggable();
============================================================
constrain-movement(限制范圍移動(dòng))：
$(”#draggable”).draggable({ axis: ‘y' }); //限制y軸
$(”#draggable2″).draggable({ axis: ‘x' }); //限制x軸
$(”#draggable3″).draggable({ containment: ‘#containment-wrapper', scroll: false }); //不出現(xiàn)滾動(dòng)條
$(”#draggable4″).draggable({ containment: ‘#demo-frame' });
$(”#draggable5″).draggable({ containment: ‘parent' }); //限制在父系框架中
============================================================
delay-start(延時(shí)移動(dòng))：
$(”#draggable”).draggable({ distance: 20 }); //移動(dòng)20像素開始拖動(dòng)
$(”#draggable2″).draggable({ delay: 1000 });//延遲1秒后開始拖動(dòng)
============================================================
snap-to (吸附移動(dòng))：
$(”#draggable”).draggable({ snap: true }); //默認(rèn)，任何方式吸附
$(”#draggable2″).draggable({ snap: ‘.ui-widget-header' }); //以某元素的內(nèi)外徑吸附
$(”#draggable3″).draggable({ snap: ‘.ui-widget-header', snapMode: ‘outer' }); //以某元素外徑吸附,吸附方式:本上吸其下，本下吸其上. 內(nèi)徑吸附：inner, 吸附方式:相反
$(”#draggable4″).draggable({ grid: [20,20] });//以一定距離移動(dòng)
$(”#draggable5″).draggable({ grid: [80, 80] });
============================================================
scroll：
$(”#draggable”).draggable({ scroll: true });
$(”#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 }); //滾動(dòng)條敏感度
$(”#draggable3″).draggable({ scroll: true, scrollSpeed: 100 }); //滾動(dòng)速度
============================================================
revert position(恢復(fù)到原始位置)：
$(”#draggable”).draggable({ revert: true }); //revert:true 設(shè)置為恢復(fù)到位置
$(”#draggable2″).draggable({ revert: true, helper: ‘clone' }); //helper:'clone' 復(fù)制拖動(dòng)
============================================================
visualfeedback (視覺效果)：
$(”#draggable”).draggable({ helper: ‘original' }); //設(shè)置不復(fù)制(初始化設(shè)置)
$(”#draggable2″).draggable({ opacity: 0.7, helper: ‘clone' }); //opacity設(shè)置透明度,并克隆元素
$(”#draggable3″).draggable({
cursor: ‘move', //設(shè)置鼠標(biāo)圖形
cursorAt: { top: -12, left: -20 }, //位置定位坐標(biāo)設(shè)置
helper: function(event) {
return $('
I\'m a custom helper
');
} //新建提示元素,上面設(shè)置其以鼠標(biāo)定位位置值
});
$(”#set div”).draggable({ stack: { group: ‘#set div', min: -1 } });//群組設(shè)置拖動(dòng),并且最后添加的元素疊加到該群組的最上面.適合做許愿板效果。
============================================================
Drag handle (拖動(dòng)點(diǎn)設(shè)置)：
$(”#draggable”).draggable({ handle: ‘p' }); //handle設(shè)置實(shí)現(xiàn)拖動(dòng)位置
$(”#draggable2″).draggable({ cancel: “p.ui-widget-header” }); //cancel設(shè)置限制拖動(dòng)位置
============================================================
Cursor style (鼠標(biāo)樣式)：
$(”#draggable”).draggable({ cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor設(shè)置鼠標(biāo)樣式, top、left、right、bottom設(shè)置元素相對(duì)鼠標(biāo)的定位點(diǎn)
$(”#draggable2″).draggable({ cursorAt: { cursor: ‘crosshair', top: -5, left: -5 } });
$(”#draggable3″).draggable({ cursorAt: { bottom: 0 } });
===========================================================
Cursor style (鼠標(biāo)樣式)：
$(”#draggable”).draggable({ cursorAt: { cursor: ‘move', top: 56, left: 56 } }); //cursor設(shè)置鼠標(biāo)樣式, top、left、right、bottom設(shè)置元素相對(duì)鼠標(biāo)的定位點(diǎn)
============================================================
Draggable+sortable：
$(”#sortable”).sortable({
revert: true
});
$(”#draggable”).draggable({
connectToSortable: ‘#sortable', //設(shè)置拖動(dòng)加入到其他列表中
helper: ‘clone',
revert: ‘invalid'
});

最新評(píng)論