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


Posted in Javascript onNovember 15, 2013

[原文翻译]
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
[产生影响]
   可拖动控件拖动时采用grid的方式拖动, 也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.
[代码示例]
   [初始化]
   $('.selector').draggable({ grid: [50, 20] });
   [获取属性值]
   var grid = $('.selector').draggable('option', 'grid');
   [设置属性值]
   $('.selector').draggable('option', 'grid', [50, 20]);
handle:
[类型]选择器或元素
[默认值]false
[产生影响]
   指定触发拖动的元素. 用法: 将一个id=window的div设置为可拖动控件, 设置它的handle是该div中的一个id=title的span, 那么, 就只有在id=title的span上点击拖动才是有效的.   注意: 该元素一定要是可拖动控件的子元素.
[代码示例]
   [初始化]
   $('.selector').draggable({ handle: 'h2' });
   [获取属性值]
   var handle = $('.selector').draggable('option', 'handle');
   [设置属性值]
   $('.selector').draggable('option', 'handle', 'h2');
helper:
[类型]字符串或函数
   字符串取值:
    'original': 可拖动控件本身移动
    'clone': 将可拖动控件自身克隆一个移动, 自身在原始位置不变
   函数则必须返回一个DOM元素: 以函数返回的DOM元素移动展现拖动的过程.
[默认值]'original'
[产生影响]
   拖动过程中帮助用户知道当前拖动位置的元素.
[代码示例]
   [初始化]
   $('.selector').draggable({ helper: 'clone' });
   [获取属性值]
   var helper = $('.selector').draggable('option', 'helper');
   [设置属性值]
   $('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[类型]布尔值或选择器, 选择器的选择结果需要是iframe元素
[默认值]false
[产生影响]
   阻止拖动过程中由于鼠标指针在iframe区域移动, iframe对鼠标移动事件的默认响应.
   如果设置为true, 将会阻止拖动过程中当前页面上所有的iframe的mousemove事件, 如果设置一个选择器, 将会阻止指定的iframe的mousemove事件.
[代码示例]
   [初始化]
   $('.selector').draggable({ iframeFix: true });
   [获取属性值]
   var iframeFix = $('.selector').draggable('option', 'iframeFix');
   [设置属性值]
   $('.selector').draggable('option', 'iframeFix', true);
opacity:
[类型]浮点数值
[默认值]false
[产生影响]
   拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.
[代码示例]
   [初始化]
   $('.selector').draggable({ opacity: 0.35 });
   [获取属性值]
   var opacity = $('.selector').draggable('option', 'opacity');
   [设置属性值]
   $('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[类型]Boolean
[默认值]false
[产生影响]
   如果设置为true, 所有的droppable位置会在每次mousemove事件中进行计算.
   注意: 该选项主要用于解决高级动态页面展现问题. 慎用.
[代码示例]
   [初始化]
   $('.selector').draggable({ refreshPositions: true });
   [获取属性值]
   var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
   [设置属性值]
   $('.selector').draggable('option', 'refreshPositions', true);
revert:
[类型]Boolean, 字符串
[默认值]false
[产生影响]
   影响一次拖动之后是否回归到原始位置.
   true: 每次拖动停止之后, 元素自动回到原始位置
   'invalid': 除非是一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.
   'valid': 除invalid之外的其他情况.
[代码示例]
   [初始化]
   $('.selector').draggable({ revert: true });
   [获取属性值]
   var revert = $('.selector').draggable('option', 'revert');
   [设置属性值]
   $('.selector').draggable('option', 'revert', true);
revertDuration:
[类型]整数
[默认值]500
[产生影响]
   revert(回归到原始位置)整个过程需要的时间, 单位是毫秒. 如果设置revert选项设置为false, 则忽略此属性.
[代码示例]
   [初始化]
   $('.selector').draggable({ revertDuration: 1000 });
   [获取属性值]
   var revertDuration = $('.selector').draggable('option', 'revertDuration');
   [设置属性值]
   $('.selector').draggable('option', 'revertDuration', 1000);
scope:
[类型]字符串
[默认值]'default'
[产生影响]
   该选项描述一个范围, 和droppable的同名选项结合使用, droppable的accept选项用来设置可以接受的draggable控件, 同时, 可接受的drggable控件受scope选项约束, 必须是同一个scope中的draggable和droppable才可以互相拖放.
   例如:
   $('#draggable_a').draggable({scope: 'a'});
   $('#draggable_b').draggable({scope: 'b'});
   $('#droppable_a').droppable({scope: 'a'});
   $('#droppable_b').droppable({scope: 'b'});
   droppable控件的accept选项默认是'*', 看起来数draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的约束, draggable_a只能放入到droppable_a, draggable_b只能发乳到droppable_b中.
   注意: 这个选项就和变量的名称空间的意义类似. 默认值是'default', 说明如果不指定, 大家都还是有scope的, 名字是default而已.
[代码示例]
   [初始化]
   $('.selector').draggable({ scope: 'tasks' });
   [获取属性值]
   var scope = $('.selector').draggable('option', 'scope');
   [设置属性值]
   $('.selector').draggable('option', 'scope', 'tasks');
scroll:
[类型]Boolean
[默认值]true
[产生影响]
   如果设置为true, 在拖动过程中超出可拖动控件容器的时候, 容器自动增加滚动条
[代码示例]
   [初始化]
   $('.selector').draggable({ scroll: false });
   [获取属性值]
   var scope = $('.selector').draggable('option', 'scope');
   [设置属性值]
   $('.selector').draggable('option', 'scroll', false);
scrollSensitivity:
[类型]整数值
[默认值]20
[产生影响]
   滚动条的敏感度.
   下面所属的鼠标指针是指在draggable控件移动过程中, 鼠标所处位置.
   鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条开始滚动.
[代码示例]
   [初始化]
   $('.selector').draggable({ scrollSensitivity: 40 });
   [获取属性值]
   var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
   [设置属性值]
   $('.selector').draggable('option', 'scrollSensitivity', 40);
scrollSpeed:
[类型]整数值
[默认值]20
[产生影响]
   由于scrollSensitivity导致的滚动发生时, 滚动条一次滚动多少像素值.
[代码示例]
   [初始化]
   $('.selector').draggable({ scrollSpeed: 40 });
   [获取属性值]
   var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
   [设置属性值]
   $('.selector').draggable('option', 'scrollSpeed', 40);
snap:
[类型]Boolean, 选择器
[默认值]false
[产生影响]
   吸附功能, 设置为true等价与设置选择器.ui-draggable, 具体效果是在选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能, 吸附就是拖动过程中, 靠近但是还没有挨上目标组件是, 自动的将正在拖动的组件吸过去.
[代码示例]
   [初始化]
   $('.selector').draggable({ snap: true });
   [获取属性值]
   var snap = $('.selector').draggable('option', 'snap');
   [设置属性值]
   $('.selector').draggable('option', 'snap', true);
snapMode:
[类型]字符串, 可选值如下
   'inner': 在指定的元素内部可以吸附
   'outer': 在指定元素外部可以吸附
   'both': 里面外面都可以吸附.
[默认值]'both'
[产生影响]
   设定吸附时候的模式.
[代码示例]
   [初始化]
   $('.selector').draggable({ snapMode: 'outer' });
   [获取属性值]
   var snapMode = $('.selector').draggable('option', 'snapMode');
   [设置属性值]
   $('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[类型]整数
[默认值]20
[产生影响]
   设定离目标对象的边多少像素的时候, 进行吸附.
[代码示例]
   [初始化]
   $('.selector').draggable({ snap: true });
   [获取属性值]
   var snap = $('.selector').draggable('option', 'snap');
   [设置属性值]
   $('.selector').draggable('option', 'snap', true);
stack:
[类型]对象{group: '.selector', min: 50}
[默认值]false
[产生影响]
   一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.
[代码示例]
   [初始化]
   $('.selector').draggable({ stack: { group: 'products', min: 50 } });
   [获取属性值]
   var stack = $('.selector').draggable('option', 'stack');
   [设置属性值]
   $('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex:
[类型]整数
[默认值]false
[产生影响]
   拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.
[代码示例]
   [初始化]
   $('.selector').draggable({ zIndex: 2700 });
   [获取属性值]
   var zIndex = $('.selector').draggable('option', 'zIndex');
   [设置属性值]
   $('.selector').draggable('option', 'zIndex', 2700);
[事件]
start: 拖动开始, 指鼠标按下, 开始移动.
[类型]dragstart
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
drag: 拖动过程中鼠标移动.
[类型]drag
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
stop: 拖动结束.
[类型]dragstop
[回调函数接受的参数]
   event: 原生的浏览器事件.
   ui: JQuery的ui对象
   this: 当前拖动的控件DOM对象
[代码示例]
初始化时设置事件.
$('.selector').draggable({
     start: function(event, ui) { alert(this); },
     drag: function(event, ui) { alert(this); },
     stop: function(event, ui) { alert(this); }
});
动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.
$(".selector").bind('dragstart', function(event, ui) {
   alert(this);
});
$(".selector").bind('drag', function(event, ui) {
   alert(this);
});
$(".selector").bind('dragstop', function(event, ui) {
   alert(this);
});
[方法]
destroy: 完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.
[代码示例]
   $(".selector").progressbar('destroy');
将之前初始化的.selector指定的可拖动控件销毁, 使其返回初始化之前的状态.
disable: 将可拖动控件样式改变成为失效, 与enable对应.
enable: 将可拖动控件样式改变为允许, 与disable对应.
option: 获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置.

[总结]
addClasses: 用来设置是否添加ui-draggable样式.
appendTo: 设置追加到什么地方
axis: 设置拖动的方向
cancel, handle: 设置控制整个控件拖动动作的区域, cancel指定区域不能拖动, handle指定区域控制控件拖动.
connectToSortable: 需要和sortable集成.
containment: 设置控件可拖动范围
cursor, cursorAt: 设置拖动过程中, 鼠标的样式及相对空间自身的位置.
delay, distance: 设置拖动的延迟, delay设置延迟时间, distance设置延迟距离, 目的是防止误点击带来的不期望拖动.
grid: 设置拖动过程移动的单位(以小格的方式移动)
helper: 设置拖动过程中, 跟随鼠标移动的组件.
iframeFix: 解决拖动过程中与iframe层叠后的事件问题.
opacity: 拖动过程helper的不透明度.
refreshPositions: 设置后drop过程中, 鼠标每次移动都会计算位置.
revert, revertDuration: 设置撤销移动相关.
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标.
scroll, scrollSensitivity, scrollSpeed: 设置拖动过程中带来的滚动条相关问题.
snap, snapMode, snapTolerance: 设置吸附的相关属性.
stack, zIndex: 设置控件的层次.

Javascript 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
Knockout text绑定DOM的使用方法
Nov 15 #Javascript
Knockout visible绑定使用方法
Nov 15 #Javascript
Knockout数组(observable)使用详解示例
Nov 15 #Javascript
图片上传插件jquery.uploadify详解
Nov 15 #Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 #Javascript
Json和Jsonp理论实例代码详解
Nov 15 #Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 #Javascript
You might like
PHP 翻页 实例代码
2009/08/07 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
vue绑定class与行间样式style详解
2017/08/16 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
JS使用H5实现图片预览功能
2019/09/30 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
ASP.NET Core中的配置详解
2021/02/05 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
小学生自我鉴定
2013/10/12 职场文书
出国导师推荐信
2014/01/16 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
二年级小学生评语
2014/04/21 职场文书
六查六看六改心得体会
2014/10/14 职场文书
个人作风建设心得体会
2014/10/22 职场文书
信访工作汇报材料
2014/10/27 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers