jQuery技术

jqueryui(二)draggable,droppable学习总结(3)

字号+ 作者:H5之家 来源:H5之家 2017-04-09 10:01 我要评论( )

[类型]对象 通过设置对象的top, left, right, bottom的属性值中的一个或两个来确定位置. [默认值]false [产生影响] 在拖动控件的过程中, 鼠标在控件上显示的位置, 值为false(默认)时, 从哪里点击开始拖动, 鼠标位置

[类型]对象
通过设置对象的top, left, right, bottom的属性值中的一个或两个来确定位置.
[默认值]false
[产生影响]
在拖动控件的过程中, 鼠标在控件上显示的位置, 值为false(默认)时, 从哪里点击开始拖动, 鼠标位置就在哪里, 如果设置了, 就会在一个相对控件自身左上角偏移位置处, 比如: .
[代码示例]
$(‘.selector’).draggable(‘option’, ‘cursorAt’, {left: 8, top: 8});
那么拖动过程中, 鼠标就会在自身的左上角向下向右各偏移8像素处

(7)delay:

[类型]整数, 单位是毫秒
[默认值]0
[产生影响]
可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 到delay指定的时间, 如果鼠标左键还没有松开, 那么就认为这次拖动有效, 否则, 认为这次拖动无效.
[代码示例]
$(‘.selector’).draggable({ delay: 500 });

(8)distance:

[类型]整数, 单位是像素
[默认值]1
[产生影响]
可拖动控件从鼠标左键按下开始, 到拖动效果产生的时鼠标必须产生的位移. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 只有当鼠标产生的位移达到distance指定的值时, 才认为是有效的拖动.
[代码示例]
$(‘.selector’).draggable({ distance: 30 });

(9)grid:

[类型]数组[x, y], x代表水平大小, y代表垂直大小, 单位是像素
[默认值]false
[产生影响]
可拖动控件拖动时采用grid的方式拖动, 也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.
[代码示例]
$(‘.selector’).draggable({ grid: [50, 20] });

(10)handle:

[类型]选择器或元素
[默认值]false
[产生影响]
指定触发拖动的元素. 用法: 将一个id=window的div设置为可拖动控件, 设置它的handle是该div中的一个id=title的span, 那么, 就只有在id=title的span上点击拖动才是有效的. 注意: 该元素一定要是可拖动控件的子元素.
[代码示例]
$(‘.selector’).draggable({ handle: ‘h2′ });

(11)helper:

[类型]字符串或函数
字符串取值:
‘original’: 可拖动控件本身移动
‘clone’: 将可拖动控件自身克隆一个移动, 自身在原始位置不变
函数则必须返回一个DOM元素: 以函数返回的DOM元素移动展现拖动的过程.
[默认值]‘original’
[产生影响]
拖动过程中帮助用户知道当前拖动位置的元素.
[代码示例]
$(‘.selector’).draggable({ helper: ‘clone’ });
helper: function(event){
return $( “

I’m a custom helper

” );
}

(12)opacity:

[类型]浮点数值
[默认值]false
[产生影响]
拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.
[代码示例]
$(‘.selector’).draggable({ opacity: 0.35 });

(13)revert:

[类型]Boolean, 字符串
true: 每次拖动停止之后, 元素自动回到原始位置
‘invalid’: 除非是一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.
‘valid’: 除invalid之外的其他情况.
[默认值]false
[产生影响]
影响一次拖动之后是否回归到原始位置.
[代码示例]
$(‘.selector’).draggable({ revert: true });

(14)revertDuration:

[类型]整数
[默认值]500
[产生影响]
revert(回归到原始位置)整个过程需要的时间, 单位是毫秒. 如果设置revert选项设置为false, 则忽略此属性.
[代码示例]
$(‘.selector’).draggable({ revertDuration: 1000 });

(15)scope:

[类型]字符串
[默认值]‘default’
[产生影响]
在多个draggable和droppable对象的情况下,为了防止混乱,用来和droppable的对象进行分组。
只有处在同一个分组里,droppable才会接受。
该选项描述一个范围, 和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’ });

(16)scroll:

[类型]Boolean
[默认值]true
[产生影响]
如果设置为true, 在拖动过程中超出可拖动控件容器的时候, 容器自动增加滚动条
[代码示例]
$(‘.selector’).draggable({ scroll: false });

(17)scrollSensitivity:

[类型]整数值
[默认值]20
[产生影响]
滚动条的敏感度.
下面所属的鼠标指针是指在draggable控件移动过程中, 鼠标所处位置.
鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条开始滚动.
[代码示例]
$(‘.selector’).draggable({ scrollSensitivity: 40 });

(18)scrollSpeed:

[类型]整数值
[默认值]20
[产生影响]
由于scrollSensitivity导致的滚动发生时, 滚动条一次滚动多少像素值.
[代码示例]
$(‘.selector’).draggable({ scrollSpeed: 40 });

(19)snap

:
[类型]Boolean, 选择器
[默认值]false
[产生影响]
吸附功能, 设置为true等价与设置选择器.ui-draggable, 具体效果是在选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能, 吸附就是拖动过程中, 靠近但是还没有挨上目标组件是, 自动的将正在拖动的组件吸过去.
[代码示例]
$(‘.selector’).draggable({ snap: true });

(20)snapMode:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评