欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery.ui.draggable中文文档

程序员文章站 2022-07-09 12:54:47
jquery.ui.draggable中文文档 jquery ui draggable插件用来使选中的元素可以通过鼠标拖动. draggable的元素受影响css: ui-draggable, 拖动...

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
[产生影响]
   可拖动控件拖动时采用grid的方式拖动, 也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.
[代码示例]
   [初始化]
   $('.selector').draggable({ grid: [50, 20] });
   [获取属性值]
   var grid = $('.selector').draggable('option', 'grid');
   [设置属性值]
   $('.selector').draggable('option', 'grid', [50, 20]);
handle:
[类型]选择器或元素
[默认值]false
[产生影响]
   指定触发拖动的元素. 用法: 将一个id=window的p设置为可拖动控件, 设置它的handle是该p中的一个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: 设置控件的层次.