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'

　　});