jquery.ui.draggable中文文档(原文翻译)

[原文翻译]
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.
Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.
如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标.
所有的回调函数(start, stop, drag等事件)接受两个参数:
event: 浏览器原生的事件
ui: 一个JQuery的ui对象, 其中有以下主要属性
   ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
   ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
   ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域.   html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)
[选项]
addClasses:
[类型]Boolean(布尔值)
[默认值]true
[产生影响]
   用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
   true表示ui-draggable样式被添加到该元素.
   false表示ui-draggable样式不被添加到该元素.
[代码示例]draggable其他选项的初始化, 获取属性值, 设置属性值部分除有特殊功能, 不再赘述, 仅粘贴代码.
   [初始化]
   $('.selector').draggable({ addClasses: false });
   将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式
   [获取属性值]
   var addClasses = $('#draggable').draggable('option', 'addClasses');
   获取.selector选择器选中的可拖动控件的addClasses选项的值.
   [设置属性值]
   $('.selector').draggable('option', 'addClasses', false);
   将.selector选择器选中的可拖动控件的addClasses选项值设置为false.
appendTo:
[类型]Element, Selector(HTML元素对象或选择器)
[默认值]'parent' 父元素
[产生影响]
   用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.
[代码示例]
   [初始化]
   $('.selector').draggable({ appendTo: 'body' });
   [获取属性值]
   //getter
   var appendTo = $('.selector').draggable('option', 'appendTo');
   [设置属性值]
   //setter
   $('.selector').draggable('option', 'appendTo', 'body');.
axis:
[类型]String, Boolean(可取的值有'x', 'y', false)
   'x': 只能水平拖动
   'y': 只能垂直拖动
   false: 既可以水平, 也可以垂直拖动.
[默认值]false, 不限制拖动的方向
[产生影响]
   约束拖动过程中的取向.
[代码示例]
   [初始化]
   $('.selector').draggable({ axis: 'x' });
   [获取属性值]
   var axis = $('.selector').draggable('option', 'axis');
   [设置属性值]
   $('.selector').draggable('option', 'axis', 'x');
cancel:
[类型]选择器
[默认值]':input, option'
[产生影响]
   通过选择器指定这类元素不能被渲染成draggable控件.
[代码示例]
   [初始化]
   $('.selector').draggable({ cancel: 'button' });
   [获取属性值]
   var cancel = $('.selector').draggable('option', 'cancel');
   [设置属性值]
   $('.selector').draggable('option', 'cancel', 'button');
connectToSortable: 此选项需要和sortable联合工作, 再议.
[类型]选择器
[默认值]':input, option'
[产生影响]
   通过选择器指定这类元素不能被渲染成draggable控件.
[代码示例]
   [初始化]
   $('.selector').draggable({ cancel: 'button' });
   [获取属性值]
   var cancel = $('.selector').draggable('option', 'cancel');
   [设置属性值]
   $('.selector').draggable('option', 'cancel', 'button');
containment:
[类型]选择器, 元素, 字符串, 数组.
   选择器: 只能在选择器约束的元素内拖动
   元素: 只能在给定的元素内拖动
   字符串:
    parent: 只能在父容器内拖动
    document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
    widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
   数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
   false: 不限制拖动的活动范围
[默认值]false
[产生影响]
   影响指定可拖动控件的活动区域.
[代码示例]
   [初始化]
   $('.selector').draggable({ containment: 'parent' });
   [获取属性值]
   var containment = $('.selector').draggable('option', 'containment');
   [设置属性值]
   $('.selector').draggable('option', 'containment', 'parent');
cursor:
[类型]字符串.
[默认值]'auto'
[产生影响]
   影响指定可拖动控件在拖动过程中的鼠标样式, 该样式设定之后, 需要控件的原始元素支持指定的cursor样式, 如果指定的值原始元素不支持, 则使用原始元素默认的cursor样式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由于button不支持crosshair这个鼠标样式, 所以, 会以默认形式显示.
[代码示例]
   [初始化]
   $('.selector').draggable({ cursor: 'crosshair' });
   [获取属性值]
   var cursor = $('.selector').draggable('option', 'cursor');
   [设置属性值]
   $('.selector').draggable('option', 'cursor', 'crosshair');
cursorAt:
[类型]对象
   通过设置对象的top, left, right, bottom的属性值中的一个或两个来确定位置.
[默认值]false
[产生影响]
   在拖动控件的过程中, 鼠标在控件上显示的位置, 值为false(默认)时, 从哪里点击开始拖动, 鼠标位置就在哪里, 如果设置了, 就会在一个相对控件自身左上角偏移位置处, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那么拖动过程中, 鼠标就会在自身的左上角向下向右各偏移8像素处.
[代码示例]
   [初始化]
   $('.selector').draggable({ cursor: 'crosshair' });
   [获取属性值]
   var cursor = $('.selector').draggable('option', 'cursor');
   [设置属性值]
   $('.selector').draggable('option', 'cursor', 'crosshair');
delay:
[类型]整数, 单位是毫秒
[默认值]0
[产生影响]
   可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 到delay指定的时间, 如果鼠标左键还没有松开, 那么就认为这次拖动有效, 否则, 认为这次拖动无效.
[代码示例]
   [初始化]
   $('.selector').draggable({ delay: 500 });
   [获取属性值]
   var delay = $('.selector').draggable('option', 'delay');
   [设置属性值]
   $('.selector').draggable('option', 'delay', 500);
distance:
[类型]整数, 单位是像素
[默认值]1
[产生影响]
   可拖动控件从鼠标左键按下开始, 到拖动效果产生的时鼠标必须产生的位移. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 只有当鼠标产生的位移达到distance指定的值时, 才认为是有效的拖动.
[代码示例]
   [初始化]
   $('.selector').draggable({ distance: 30 });
   [获取属性值]
   var distance = $('.selector').draggable('option', 'distance');
   [设置属性值]
   $('.selector').draggable('option', 'distance', 30);
grid:
[类型]数组[x, y], x代表水平大小, y代表垂直大小, 单位是像素
[默认值]false
[产生影响]
   可拖动