jQuery技术

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

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

[类型]字符串, 可选值如下 ‘inner’: 在指定的元素内部可以吸附 ‘outer’: 在指定元素外部可以吸附 ‘both’: 里面外面都可以吸附. [默认值]‘both’ [产生影响] 设定吸附时候的模式. [代码示例] $(‘.selector’

[类型]字符串, 可选值如下
‘inner’: 在指定的元素内部可以吸附
‘outer’: 在指定元素外部可以吸附
‘both’: 里面外面都可以吸附.
[默认值]‘both’
[产生影响]
设定吸附时候的模式.
[代码示例]
$(‘.selector’).draggable({ snapMode: ‘outer’ });

(21)snapTolerance:

[类型]整数
[默认值]20
[产生影响]
设定离目标对象的边多少像素的时候, 进行吸附.
[代码示例]
$(‘.selector’).draggable({ snap: true });

(22)stack:

[类型]对象{group: ‘.selector’, min: 50}
[默认值]false
[产生影响]
一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.
[代码示例]
$(‘.selector’).draggable({ stack: { group: ‘products’, min: 50 } });

(23)zIndex:

[类型]整数
[默认值]false
[产生影响]
拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.
[代码示例]
$(‘.selector’).draggable({ zIndex: 2700 });

五、droppable的超级详细参数说明 1、事件 (1)activate

[产生影响]
这个事件会在任何允许的draggable对象开始拖动时触发.
它可以用来在你想让droppable对象在可以被填充的时”亮起来”的时候.
[代码示例]
$(‘.selector’).droppable({ activate: function(event, ui) { … } });

(2)deactivate

[产生影响]
此事件会在任何允许的draggable对象停止拖动时触发.
[代码示例]
$(‘.selector’).droppable({ deactivate: function(event, ui) { … } });

(3)over

[产生影响]
此事件会在一个允许的draggable对象”经过”(根据tolerance参数的定义判断)这个droppable对象时触发.
[代码示例]
$(‘.selector’).droppable({ over: function(event, ui) { … } });

(4)out

[产生影响]
会在一个允许的draggable对象离开(根据tolerance参数的定义判断)这个droppable对象时触发.
[代码示例]
$(‘.selector’).droppable({ out: function(event, ui) { … } });

(5)drop

[产生影响]
这个事件会在一个允许的draggable对象填充进这个droppable对象时触发.
回调函数中, $(this) 表示被填充的droppable对象. ui.draggable 表示draggable对象.
[代码示例]
$(‘.selector’).droppable({ drop: function(event, ui) { … } });

2、参数(选项

(1)accept

[类型]Selector, Function
[默认值]‘*’
接受所有符合选择器条件的draggable对象. 如果指定了一个函数, 该函数要求为页面上每个draggable对象(符合函数第一个条件的对象)提供一个过滤器.如果要这些元素被dropable接受,该函数需要返回true.
[代码示例]
使用指定的accept参数初始化一个droppable.
$(‘.selector’).droppable({ accept: ‘.special’ });

(2)activeClass

[类型]String
[默认值]false
[产生影响]
如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式.
[代码示例]
使用指定的activeClass参数初始化一个droppable.
$(‘.selector’).droppable({ activeClass: ‘.ui-state-highlight’ });

(3)addClasses

[类型]Boolean
[默认值]true
[产生影响]
如果设置为false, 可以防止ui-droppable类在进行时添加. 这可能会使在初始化数百个元素执行.droppable()时使性能得到理想的优化.
[代码示例]
使用指定的addClasses参数初始化一个droppable.
$(‘.selector’).droppable({ addClasses: false });

(4)greedy

[类型]Boolean
[默认值]false
[产生影响]
如果设置为true,将在嵌套的droppable对象中阻止事件的传播.(阻止事件向上冒泡)
[代码示例]
使用指定的greedy参数初始化一个droppable.
$(‘.selector’).droppable({ greedy: true });

(5)hoverClass

[类型]String
[默认值]false
[产生影响]
如果设置了该参数,将在一个被允许的draggable对象悬停在droppable对象上时向droppable对象添加一个指定的样式.
[代码示例]
使用指定的hoverClass参数初始化一个droppable.
$(‘.selector’).droppable({ hoverClass: ‘drophover’ });

(6)scope

[类型]String
[默认值]‘default’
[产生影响]
用来设置draggle对象和droppable对象的组, 除了droppable中的accept属性指定的元素外,和droppable对象相同组的draggable对象也被允许添加到droppable对象中.
[代码示例]
使用指定的scope参数初始化一个droppable.
$(‘.selector’).droppable({ scope: ‘tasks’ });

(7)tolerance

[类型]String
允许使用的值: ‘fit’, ‘intersect’, ‘pointer’, ‘touch’.
fit: draggable 完全重叠到droppable
intersect: draggable 和droppable至少重叠50%
pointer: 鼠标重叠到droppable
touch: draggable和droppable的任意重叠
[默认值]‘intersect’
[产生影响]
指定使用那种模式来测试一个draggable”经过”一个droppable对象.
[代码示例]
使用指定的tolerance参数初始化一个droppable.
$(‘.selector’).droppable({ tolerance: ‘fit’ });


 

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

相关文章
网友点评