JQuery UI Demo Darggable学习结果

jQuery UI-Draggable 参数集合

jQuery UI-Draggable常用参数集合。 Draggable 
库文件：ui/ui.core.js、ui/ui.draggable.js 
============================================================ 
Default： 
     $(”#draggable”).draggable(); 
============================================================ 
Events:
     $$("#draggable").draggable({
       start: function() {
          counts[0]++;
          updateCounterStatus($start_counter,counts[0]);//$start_counter页面上用于显示的<span>对象；counts[0]当前是第几次拖动。
         },
         drag: function() {
          counts[1]++;
          updateCounterStatus($drag_counter,counts[1]);//$drag_counter页面上用于显示的<span>对象；counts[1]已经拖动过的路径长度。
         },
         stop: function() {
          counts[2]++;
          updateCounterStatus($stop_counter,counts[2]);//$stop_counter页面上用于显示的<span>对象；counts[2]已完成多少次拖动。
         }
        });
       });
============================================================ 
constrain-movement(限制范围移动)： 
      $(”#draggable”).draggable({ axis: ‘y' }); //限制y轴 
      $(”#draggable2″).draggable({ axis: ‘x' }); //限制x轴 
      $(”#draggable3″).draggable({ containment: ‘#containment-wrapper', scroll: false }); // scroll: false不出现滚动条;如果不写默认值为true
      $(”#draggable4″).draggable({ containment: ‘#demo-frame' }); //containment: ‘#demo-frame'限定活动区域
      $(”#draggable5″).draggable({ containment: ‘parent' }); //限制在父系框架中 
============================================================ 
delay-start(延时移动)： 
      $(”#draggable”).draggable({ distance: 20 }); //移动20像素开始拖动 
      $(”#draggable2″).draggable({ delay: 1000 });//延迟1秒后开始拖动 
      $(".ui-draggable").disableSelection();//??
============================================================ 
snap-to (吸附移动)： 
      $(”#draggable”).draggable({ snap: true }); //snap: true默认，任何方式吸附 
      $(”#draggable2″).draggable({ snap: ‘.ui-widget-header' }); //无snapMode:默认，以某元素的内外径吸附 
      $(”#draggable3″).draggable({ snap: ‘.ui-widget-header', snapMode: ‘outer' }); //snapMode: ‘outer'以某元素外径吸附,吸附方式:本上吸其下，本下吸其上. 内径吸附：inner, 吸附方式:相反 
      $(”#draggable4″).draggable({ grid: [20,20] });//以一定距离移动 
      $(”#draggable5″).draggable({ grid: [80, 80] }); 
============================================================ 
scroll（滚动条）： 
      $(”#draggable”).draggable({ scroll: true }); //scroll: true设置存在滚动条
      $(”#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 }); //scrollSensitivity: 100滚动条敏感度 
      $(”#draggable3″).draggable({ scroll: true, scrollSpeed: 100 }); //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设置透明度（其值在0.1^0.9；此范围之外为不透明）,helper: ‘clone'克隆元素 
      $(”#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 } }); 
============================================================ 
Draggable+sortable： 
      $(”#sortable”).sortable({ 
      revert: true //排序
      }); 
      $(”#draggable”).draggable({ 
      connectToSortable: ‘#sortable', //设置拖动加入到其他列表中 
      helper: ‘clone', 
      revert: ‘invalid' 
      });