JQueryUIDraggable插件详细使⽤说明
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包装对象, t可以获取到原⽣的DOM元素.
ui.position: ui.helper(也就是我们要拖动的元素)相对于⽗元素(包含⾃⼰的元素, 如果是顶层, 对应body)的偏移, 值是⼀个对象{top, left}----也就是可以⽤p获取到该元素与⽗元素的top当前偏移
ui.offset: 与ui.position同意, 这⾥表⽰的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, ⽽不是ht
ml的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');
c++迭代器获取.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
echarts series$('.selector').draggable('option', 'appendTo', 'body');.
3. axis:
[类型]String, Boolean(可取的值有'x', 'y', false)
jquery下载文件插件'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: 不限制拖动的活动范围
java在线学习教程[默认值]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');
[类型]整数, 单位是毫秒
[默认值]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');
[类型]字符串或函数
字符串取值:
'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);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论