ui.draggable Class
可拖拽小部件（Draggable Widget）
允许使用鼠标移动元素。
注释：让被选元素可被鼠标拖拽。如果您不只是拖拽，而是拖拽 & 放置，请查看 jQuery UI 可放置（Droppable）插件，为可拖拽元素提供了一个放置目标。
Constructor
ui.draggable
()
Item Index
Properties
- options
- options.addClasses
- options.appendTo
- options.axis
- options.cancel
- options.connectToSortable
- options.containment
- options.cursor
- options.cursorAt
- options.delay
- options.disabled
- options.distance
- options.grid
- options.handle
- options.helper
- options.iframeFix
- options.opacity
- options.refreshPositions
- options.revert
- options.revertDuration
- options.scope
- options.scroll
- options.scrollSensitivity
- options.scrollSpeed
- options.snap
- options.snapMode
- options.snapTolerance
- options.stack
- options.zIndex
Properties
options
Object
一个包含小部件当前使用选项的对象。 在实例化时，用户提供的任何选项将会自动与 $.myNamespace.myWidget.prototype.options 中定义的默认值合并。用户指定的选项会覆盖默认值。
options.addClasses
Boolean
如果设置为 false，将阻止 ui-draggable class 被添加。当在数百个元素上调用 .draggable() 时，这么设置有利于性能优化。
Example:
//初始化带有指定 addClasses 选项的 draggable：
$( ".selector" ).draggable({ addClasses: false });options.appendTo
JQuery | Element | Selector | String
当拖拽时，draggable 助手（helper）要追加到哪一个元素。
支持多个类型：
jQuery：一个 jQuery 对象，包含助手（helper）要追加到的元素。
Element：要追加助手（helper）的元素。
Selector：一个选择器，指定哪一个元素要追加助手（helper）。
String：字符串 "parent" 将促使助手（helper）成为 draggable 的同级。
Default: "parent"
Example:
//初始化带有指定 axis 选项的 draggable：
$( ".selector" ).draggable({ axis: "x" });options.axis
String
约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值："x", "y"。
Default: false
Example:
//初始化带有指定 appendTo 选项的 draggable：
$( ".selector" ).draggable({ appendTo: "body" });options.cancel
Selector
防止从指定的元素上开始拖拽。
Default: "input, textarea, button, select, option"
Example:
//初始化带有指定 cancel 选项的 draggable：
$( ".selector" ).draggable({ cancel: ".title" });options.connectToSortable
Boolean
允许 draggable 放置在指定的 sortable 上。 如果使用了该选项，一个 draggable 可被放置在一个 sortable 列表上，然后成为列表的一部分。 注意：helper 选项必须设置为 "clone"，以便更好地工作。 必须包含 可排序小部件（Sortable Widget）。
Default: false
Example:
//初始化带有指定 connectToSortable 选项的 draggable：
$( ".selector" ).draggable({ connectToSortable: "#my-sortable" });options.containment
Selector | Element | String | Array | Boolean
约束在指定元素或区域的边界内拖拽。
支持多个类型：
Selector：可拖拽元素将被包含在 selector 第一个元素的边界内。如果未找到元素，则不设置 containment。
Element：可拖拽元素将被韩寒在元素的边界。
String：可能的值："parent"、"document"、"window"。
Array：一个数组， 以形式 [ x1, y1, x2, y2 ] 定义元素的边界。
Default: false
Example:
//初始化带有指定 containment 选项的 draggable：
$( ".selector" ).draggable({ containment: "parent" });
//在初始化后，获取或设置 containment 选项：
// getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// setter
$( ".selector" ).draggable( "option", "containment", "parent" );options.cursor
String
拖拽操作期间的 CSS 光标。
有效的 CSS 光标值包括：default、move、pointer、crosshair，等等。
Default: "auto"
Example:
//初始化带有指定 cursor 选项的 draggable：
$( ".selector" ).draggable({ cursor: "crosshair" });options.cursorAt
Object
使用 cursorAt 选项来指定相对于 draggable 的另一个位置（指定一个相对于 top、right、bottom、left 的像素值）
Default: false
Example:
//初始化带有指定 cursorAt 选项的 draggable：
$( ".selector" ).draggable({ cursorAt: { top: -5, left: -5} });options.delay
Boolean
鼠标按下后直到拖拽开始为止的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。
Default: false
Example:
//初始化带有指定 delay 选项的 draggable：
$( ".selector" ).draggable({ delay: 300 });options.disabled
Boolean
如果设置为 true，则禁用该 draggable。
Default: false
Example:
//初始化带有指定 disabled 选项的 draggable：
$( ".selector" ).draggable({ disabled: true });options.distance
Number
鼠标按下后拖拽开始前必须移动的距离，以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。
Default: 1
Example:
//初始化带有指定 distance 选项的 draggable：
$( ".selector" ).draggable({ distance: 10 });options.grid
Array
对齐拖拽助手（helper）到网格，每个 x 和 y 像素。数组形式必须是 [ x, y ]。
Default: false
Example:
//初始化带有指定 grid 选项的 draggable：
$( ".selector" ).draggable({ grid: [ 50, 20 ] });options.handle
Selector | Element
如果指定了该选项，则限制开始拖拽，除非鼠标在指定的元素上按下。 只有可拖拽（draggable）元素的后代元素才允许被拖拽。
Default: false
Example:
//初始化带有指定 handle 选项的 draggable：
$( ".selector" ).draggable({ handle: "h2" });options.helper
String | Function
允许一个 helper 元素用于拖拽显示。
支持多个类型：
String：如果设置为 "clone"，元素将被克隆，且克隆将被拖拽。
Function：一个函数，将返回拖拽时要使用的 DOMElement。
Default: false
Example:
//初始化带有指定 helper 选项的 draggable：
$( ".selector" ).draggable({ helper: "clone" });
//初始化带有指定 helper function 选项的 draggable：
$( ".selector" ).draggable({
helper: function( event ) {
return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
}
});options.iframeFix
Boolean | Selector
防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件。
在与 cursorAt 选项结合使用时，或鼠标光标未覆盖在助手（helper）上时，非常有用。
支持多个类型：
Boolean：当设置为 true 时，透明遮罩将被放置在页面上所有 iframes 上。
Selector：匹配 selector 的任意 iframes 将被透明遮罩覆盖。
Default: false
Example:
//初始化带有指定 iframeFix 选项的 draggable：
$( ".selector" ).draggable({ iframeFix: true });options.opacity
Number
当被拖拽时助手（helper）的不透明度。
Default: false
Example:
//初始化带有指定 opacity 选项的 draggable：
$( ".selector" ).draggable({ opacity: 0.35 });options.refreshPositions
Boolean
如果设置为 true，在每次鼠标移动（mousemove）时都会计算所有可放置的位置。 注意：这解决了高度动态的问题，但是明显降低了性能。
Default: false
Example:
//初始化带有指定 refreshPositions 选项的 draggable：
$( ".selector" ).draggable({ refreshPositions: true });options.revert
Boolean | String | Function
当拖拽停止时，元素是否还原到它的开始位置。
支持多个类型：
Boolean：如果设置为 true，元素总会还原。
String：如果设置为 "invalid"，还原仅在 draggable 未放置在 droppable 上时发生，如果设置为 "valid" 则相反。
Function：一个函数，确定元素是否还原到它的开始位置。该函数必须返回 true 才能还原元素。
Default: false
Example:
//初始化带有指定 revert 选项的 draggable：
$( ".selector" ).draggable({ revert: true });options.revertDuration
Number
还原（revert）动画的持续时间，以毫秒计。如果 revert 选项是 false 则忽略。
Default: 500
Example:
//初始化带有指定 revertDuration 选项的 draggable：
$( ".selector" ).draggable({ revertDuration: 200 });options.scope
String
用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。 一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。
Default: "default"
Example:
//初始化带有指定 scope 选项的 draggable：
$( ".selector" ).draggable({ scope: "tasks" });options.scroll
Boolean
如果设置为 true，当拖拽时容器会自动滚动。
Default: true
Example:
//初始化带有指定 scroll 选项的 draggable：
$( ".selector" ).draggable({ scroll: false });options.scrollSensitivity
Number
从要滚动的视区边缘起的距离，以像素计。距离是相对于指针的，不是相对于 draggable。 如果 scroll 选项是 false 则忽略。
Default: 20
Example:
//初始化带有指定 scrollSensitivity 选项的 draggable：
$( ".selector" ).draggable({ scroll: false });options.scrollSpeed
Number
当鼠标指针获取到在 scrollSensitivity 距离内时，窗体滚动的速度。 如果 scroll 选项是 false 则忽略。
Default: 20
Example:
//初始化带有指定 scrollSpeed 选项的 draggable：
$( ".selector" ).draggable({ scrollSpeed: 100 });options.snap
Boolean | Selector
元素是否对齐到其他元素。
支持多个类型：
Boolean：当设置为 true 时，元素会对齐到其它可拖拽（draggable ）元素。
Selector：一个选择器，指定要对齐到哪个元素。
Default: false
Example:
//初始化带有指定 snap 选项的 draggable：
$( ".selector" ).draggable({ snap: true });options.snapMode
String
决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。 可能的值："inner"、"outer"、"both"。
Default: "both"
Example:
//初始化带有指定 snapMode 选项的 draggable：
$( ".selector" ).draggable({ snapMode: "inner" });options.snapTolerance
Number
从要发生对齐的对齐元素边缘起的距离，以像素计。 如果 snap 选项是 false 则忽略。
Default: 20
Example:
//初始化带有指定 snapTolerance 选项的 draggable：
$( ".selector" ).draggable({ snapTolerance: 30 });options.stack
Selector
控制匹配选择器（selector）的元素集合的 z-index，总是在当前拖拽项的前面，在类似窗口管理器这样的事物中非常有用。
Default: false
Example:
//初始化带有指定 stack 选项的 draggable：
$( ".selector" ).draggable({ stack: ".products" });options.zIndex
Number
当被拖拽时，助手（helper）的 Z-index。
Default: false
Example:
//初始化带有指定 zIndex 选项的 draggable：
$( ".selector" ).draggable({ zIndex: 100 });