萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery UI-Draggable 參數

jQuery UI-Draggable 參數

  Draggable

  庫文件:ui/ui.core.js、ui/ui.draggable.js

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

  Default:

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

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

  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 $('

  I'm a custom helper

  ');

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

  });

  $(”#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'

  });

copyright © 萬盛學電腦網 all rights reserved