[类型]字符串, 可选值如下
‘inner’: 在指定的元素内部可以吸附
‘outer’: 在指定元素外部可以吸附
‘both’: 里面外面都可以吸附.
[默认值]‘both’
[产生影响]
设定吸附时候的模式.
[代码示例]
$(‘.selector’).draggable({ snapMode: ‘outer’ });
[类型]整数
[默认值]20
[产生影响]
设定离目标对象的边多少像素的时候, 进行吸附.
[代码示例]
$(‘.selector’).draggable({ snap: true });
[类型]对象{group: ‘.selector’, min: 50}
[默认值]false
[产生影响]
一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时,
这一组draggable控件就可以实现当前被拖动的始终在最前效果,
min用来指定这一组的z-index值的最小值.
[代码示例]
$(‘.selector’).draggable({ stack: { group: ‘products’, min: 50 }
});
[类型]整数
[默认值]false
[产生影响]
拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大,
越在上层.
[代码示例]
$(‘.selector’).draggable({ zIndex: 2700 });
[产生影响]
这个事件会在任何允许的draggable对象开始拖动时触发.
它可以用来在你想让droppable对象在可以被填充的时”亮起来”的时候.
[代码示例]
$(‘.selector’).droppable({ activate: function(event, ui) { … }
});
[产生影响]
此事件会在任何允许的draggable对象停止拖动时触发.
[代码示例]
$(‘.selector’).droppable({ deactivate: function(event, ui) { … }
});
[产生影响]
此事件会在一个允许的draggable对象”经过”(根据tolerance参数的定义判断)这个droppable对象时触发.
[代码示例]
$(‘.selector’).droppable({ over: function(event, ui) { … } });
[产生影响]
会在一个允许的draggable对象离开(根据tolerance参数的定义判断)这个droppable对象时触发.
[代码示例]
$(‘.selector’).droppable({ out: function(event, ui) { … } });
[产生影响]
这个事件会在一个允许的draggable对象填充进这个droppable对象时触发.
回调函数中, $(this) 表示被填充的droppable对象. ui.draggable
表示draggable对象.
[代码示例]
$(‘.selector’).droppable({ drop: function(event, ui) { … } });
)
(1)accept
[类型]Selector, Function
[默认值]‘*’
接受所有符合选择器条件的draggable对象. 如果指定了一个函数,
该函数要求为页面上每个draggable对象(符合函数第一个条件的对象)提供一个过滤器.如果要这些元素被dropable接受,该函数需要返回true.
[代码示例]
使用指定的accept参数初始化一个droppable.
$(‘.selector’).droppable({ accept: ‘.special’ });
[类型]String
[默认值]false
[产生影响]
如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式.
[代码示例]
使用指定的activeClass参数初始化一个droppable.
$(‘.selector’).droppable({ activeClass: ‘.ui-state-highlight’
});
[类型]Boolean
[默认值]true
[产生影响]
如果设置为false, 可以防止ui-droppable类在进行时添加.
这可能会使在初始化数百个元素执行.droppable()时使性能得到理想的优化.
[代码示例]
使用指定的addClasses参数初始化一个droppable.
$(‘.selector’).droppable({ addClasses: false });
[类型]Boolean
[默认值]false
[产生影响]
如果设置为true,将在嵌套的droppable对象中阻止事件的传播.(阻止事件向上冒泡)
[代码示例]
使用指定的greedy参数初始化一个droppable.
$(‘.selector’).droppable({ greedy: true });
[类型]String
[默认值]false
[产生影响]
如果设置了该参数,将在一个被允许的draggable对象悬停在droppable对象上时向droppable对象添加一个指定的样式.
[代码示例]
使用指定的hoverClass参数初始化一个droppable.
$(‘.selector’).droppable({ hoverClass: ‘drophover’ });
[类型]String
[默认值]‘default’
[产生影响]
用来设置draggle对象和droppable对象的组,
除了droppable中的accept属性指定的元素外,和droppable对象相同组的draggable对象也被允许添加到droppable对象中.
[代码示例]
使用指定的scope参数初始化一个droppable.
$(‘.selector’).droppable({ scope: ‘tasks’ });
[类型]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’ });