Draggable插件使用说明文档,draggable中文文档

作者: 前端技术  发布:2019-09-03

[原著翻译] 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能够Infiniti制的放入到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: 获取或安装可拖动控件的选项, 首个参数是选项名, 第多少个参数是值. 假使不内定值, 正是获得, 钦定值, 便是设置.

JQuery UI Draggable插件用来使选中的要素得以通过鼠标拖动.
Draggable的因素受css: ui-draggable影响, 拖动进程中的css: ui-draggable-dragging.
万一供给的不止是拖, 而是三个总体的拖放成效, 请参阅JQuery UI 的Droppable插件, 该插件提供了四个draggable放的目的.

[总结] 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: 设置控件的等级次序.

富有的回调函数(start, stop, drag等事件)接受七个参数:
    event: 浏览器原生的风浪
    ui: 一个JQuery的ui对象, 当中有以下爱抚质量

] JQuery UI Draggable插件用来使选中的成分得以经过鼠标拖动. Draggable的因素受影响css: ui-draggable, 拖动进度中的css: ui-draggable-dragging...

    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有偏移的.)

[选项]

  1. 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.

  2. 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');.

  3. 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');

  4. cancel:
        [类型]选择器
        [默认值]':input, option'
        [发出影响]
            通过选择器钦点那类成分无法被渲染成draggable控件.
        [代码示例]
        [初始化]
            $('.selector').draggable({ cancel: 'button' });
        [获得属性值]
            var cancel = $('.selector').draggable('option', 'cancel');
        [安装属性值]
            $('.selector').draggable('option', 'cancel', 'button');

  5. connectToSortable: 此选项必要和sortable联合专门的学业, 再议.
        [类型]选择器
        [默认值]':input, option'
        [产生耳濡目染]
            通过采取器钦命那类成分不可能被渲染成draggable控件.
        [代码示例]
        [初始化]
            $('.selector').draggable({ cancel: 'button' });
        [获得属性值]
            var cancel = $('.selector').draggable('option', 'cancel');
        [安装属性值]
            $('.selector').draggable('option', 'cancel', 'button');

  6. 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');

  7. 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');

  8. 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');

  9. delay:
        [类型]大背头, 单位是阿秒
        [默认值]0
        [发出震慑]
            可拖动控件从鼠标左键按下初叶, 到拖动作效果果发生的延时. 该接纳能够被用来阻拦一些不期待的点击带来的不算拖动. 具体效用是: 一遍拖动, 从鼠标左键按下, 到delay钦点的时光, 假如鼠标左键还并没有甩手, 那么就感到此番拖动有效, 不然, 认为此次拖动无效.
        [代码示例]
        [初始化]
            $('.selector').draggable({ delay: 500 });
        [猎取属性值]
            var delay = $('.selector').draggable('option', 'delay');
        [安装属性值]
            $('.selector').draggable('option', 'delay', 500);

  10. distance:
        [类型]卡尺头, 单位是像素
        [默认值]1
        [发生影响]
            可拖动控件从鼠标左键按下起来, 到拖动作效果果发生的时鼠标必需发生的位移. 该采用能够被用来阻止一些不希望的点击带来的无用拖动. 具体功能是: 二遍拖动, 从鼠标左键按下, 唯有当鼠标发生的活动达到distance内定的值时, 才以为是有效的拖动.
        [代码示例]
        [初始化]
            $('.selector').draggable({ distance: 30 });
        [得到属性值]
            var distance = $('.selector').draggable('option', 'distance');
        [安装属性值]
            $('.selector').draggable('option', 'distance', 30);

  11. 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]);

  12. 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');

  13. helper:
        [类型]字符串或函数
            字符串取值:
            'original': 可拖动控件本人移动
            'clone': 将可拖动控件本人克隆三个运动, 本人在本来地方不改变
            函数则必得回到一个DOM成分: 以函数重回的DOM元素移动表现拖动的进程.
        [默认值]'original'
        [爆发潜移暗化]
            拖动进程中扶植客户理解当前拖动地方的成分.
        [代码示例]
        [初始化]
            $('.selector').draggable({ helper: 'clone' });
        [获取属性值]
            var helper = $('.selector').draggable('option', 'helper');
        [设置属性值]
            $('.selector').draggable('option', 'helper', 'clone');

  14. 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);

  15. opacity:
        [类型]浮点数值
        [默认值]false
        [发生潜移默化]
            拖动进度中helper(拖动时跟随鼠标移动的控件)的不发光度.
        [代码示例]
        [初始化]
            $('.selector').draggable({ opacity: 0.35 });
        [收获属性值]
            var opacity = $('.selector').draggable('option', 'opacity');
        [安装属性值]
            $('.selector').draggable('option', 'opacity', 0.35);

  16. refreshPositions:
        [类型]Boolean
        [默认值]false
        [发出震慑]
            如若设置为true, 全数的droppable地点会在每便mousemove事件中进行总括.
            注意: 该选项重视用于消除高档动态页面表现难题. 慎用.
        [代码示例]
        [初始化]
            $('.selector').draggable({ refreshPositions: true });
        [得到属性值]
            var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
        [设置属性值]
            $('.selector').draggable('option', 'refreshPositions', true);

  17. revert:
        [类型]Boolean, 字符串
        [默认值]false
        [发生震慑]
            影响一回拖动之后是还是不是回归到原始地点.
            true: 每一次拖动结束以后, 成分自动回到原有地方
            'invalid': 除非是三个droppable何况被drop(放)成功了, 才不将成分重临到原始地方.
            'valid': 除invalid之外的其余情状.
        [代码示例]
        [初始化]
            $('.selector').draggable({ revert: true });
        [获取属性值]
            var revert = $('.selector').draggable('option', 'revert');
        [安装属性值]
            $('.selector').draggable('option', 'revert', true);

  18. revertDuration:
        [类型]整数
        [默认值]500
        [发生耳濡目染]
            revert(回归到原始地点)整个经过需求的年华, 单位是微秒. 假如设置revert选项设置为false, 则忽略此属性.
        [代码示例]
        [初始化]
            $('.selector').draggable({ revertDuration: 1000 });
        [获取属性值]
            var revertDuration = $('.selector').draggable('option', 'revertDuration');
        [安装属性值]
            $('.selector').draggable('option', 'revertDuration', 1000);

  19. 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');

  20. scroll:
        [类型]Boolean
        [默认值]true
        [发生潜移暗化]
            就算设置为true, 在拖动进度中中国足球球协会一流联赛过可拖动控件容器的时候, 容器自动增添滚动条
        [代码示例]
        [初始化]
            $('.selector').draggable({ scroll: false });
        [获得属性值]
            var scope = $('.selector').draggable('option', 'scope');
        [设置属性值]
            $('.selector').draggable('option', 'scroll', false);

  21. scrollSensitivity:
        [类型]整数值
        [默认值]20
        [发出影响]
            滚动条的灵敏度.
            下边所属的鼠标指针是指在draggable控件移动进度中, 鼠标所处地方.
            鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条初步滚动.
        [代码示例]
        [初始化]
            $('.selector').draggable({ scrollSensitivity: 40 });
        [获取属性值]
            var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
        [设置属性值]
            $('.selector').draggable('option', 'scrollSensitivity', 40);

  22. scrollSpeed:
        [类型]整数值
        [默认值]20
        [发生耳熟能详]
            由于scrollSensitivity导致的轮转产生时, 滚动条一遍滚动多少像素值.
        [代码示例]
        [初始化]
            $('.selector').draggable({ scrollSpeed: 40 });
        [获得属性值]
            var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
        [设置属性值]
            $('.selector').draggable('option', 'scrollSpeed', 40);

  23. snap:
        [类型]Boolean, 选择器
        [默认值]false
        [产生震慑]
            吸附效果, 设置为true等价与安装采用器.ui-draggable, 具体效果是在选用器钦点的装有因素上, 当前的draggable控件都足以兑现吸附作用, 吸附正是拖动进度中, 邻近不过还并未有挨上指标组件是, 自动的将正在拖动的组件吸过去.
        [代码示例]
        [初始化]
            $('.selector').draggable({ snap: true });
        [获得属性值]
            var snap = $('.selector').draggable('option', 'snap');
        [设置属性值]
            $('.selector').draggable('option', 'snap', true);

  24. snapMode:
        [类型]字符串, 可选值如下
            'inner': 在钦点的因素内部能够吸附
            'outer': 在钦命成格外界能够吸附
            'both': 里面外面都足以吸附.
        [默认值]'both'
        [产生听得多了就能说的详细]
            设定吸附时候的方式.
        [代码示例]
        [初始化]
            $('.selector').draggable({ snapMode: 'outer' });
        [猎取属性值]
            var snapMode = $('.selector').draggable('option', 'snapMode');
        [设置属性值]
            $('.selector').draggable('option', 'snapMode', 'outer');

  25. snapTolerance:
        [类型]整数
        [默认值]20
        [发生影响]
            设定离指标对象的边多少像素的时候, 实行吸附.
        [代码示例]
        [初始化]
            $('.selector').draggable({ snap: true });
        [赢得属性值]
            var snap = $('.selector').draggable('option', 'snap');
        [设置属性值]
            $('.selector').draggable('option', 'snap', true);

  26. 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 });

  27. zIndex:
        [类型]整数
        [默认值]false
        [发生听得多了就能说的清楚]
            拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index正是css中的层叠层数, 数值越大, 越在上层.
        [代码示例]
        [初始化]
            $('.selector').draggable({ zIndex: 2700 });
        [得到属性值]
            var zIndex = $('.selector').draggable('option', 'zIndex');
        [安装属性值]
            $('.selector').draggable('option', 'zIndex', 2700);

[事件]

  1. start: 拖动起头, 指鼠标按下, 开始移动.
        [类型]dragstart
        [回调函数接受的参数]
            event: 原生的浏览器事件.
            ui: JQuery的ui对象
            this: 当前拖动的控件DOM对象

  2. drag: 拖动进度中鼠标移动.
        [类型]drag
        [回调函数接受的参数]
            event: 原生的浏览器事件.
            ui: JQuery的ui对象
            this: 当前拖动的控件DOM对象

  3. 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);
            });

[方法]

    1. destroy: 完全移除贰个可拖动控件, 使其回落到该因素被伊始化成可拖动控件在此以前的状态.
        [代码示例]
            $(".selector").progressbar('destroy');
            将事先初步化的.selector钦命的可拖动控件销毁, 使其回来初叶化在此以前的状态.
    2. disable: 将可拖动控件样式改动成为失效, 与enable对应.
    3. enable: 将可拖动控件样式更换为允许, 与disable对应.
    4. 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: 设置控件的档次.

本文由王中王开奖结果发布于前端技术,转载请注明出处:Draggable插件使用说明文档,draggable中文文档

关键词: