jQuery技术

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

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

activate:在允许的draggable对象开始拖动时触发. deactivate:在允许的draggable对象停止拖动时触发. over:在允许的draggable对象”经过”这个droppable对象时触发 out:在允许的draggable对象离开这个droppable

activate:在允许的draggable对象开始拖动时触发.
deactivate:在允许的draggable对象停止拖动时触发.
over:在允许的draggable对象”经过”这个droppable对象时触发
out:在允许的draggable对象离开 这个droppable对象时触发
drop:在允许的draggable对象填充进这个droppable对象时触发.

       $. 
                activateevent...
                deactivateevent...
                overevent...
                outevent...
                dropevent... 
       

(2)常见参数

accept :[类型]Selector, Function [默认值]‘*’
允许被放下来的元素.
hoverClass :[类型]String [默认值]false
一个被允许的draggable对象悬停在droppable对象上时添加的class

还有:activeClass,greedy,scope,tolerance (详见 五、)

            $.
                   accept
                   hoverClass
           

三、其他相关文章

本文已经同步至我的个人博客站点:
jquery ui(二)拖拽 draggable和droppable ( )

如果想查看其它jquery ui的文章,可以点击以下链接到个人博客查看

1、jquery ui(一)简介 ( )
2、jquery ui(二)拖拽 draggable和droppable ( )
3、jquery ui(三)弹出窗口 dialog ( )
4、jquery ui(四)进度条 progressbar ( )
5、jquery ui(五)日期选择器 datepicker ( )
6、jquery ui(六)拖动排序 sortable ( )

四、drappable的超级详细参数 1、回调函数

有start, stop, drag等事件,这些函数都接受两个参数:event和ui。
event: 浏览器原生的事件 ; ui: 一个JQuery的ui对象。
其中ui 有以下属性:
a) ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
b) ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}—-也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
c) ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域. html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)
(1) start: 拖动开始, 指鼠标按下, 开始移动.
(2) drag: 拖动过程中鼠标移动.
(3) stop: 拖动结束.
[代码示例]
初始化时设置事件.
$(‘.selector’).draggable({
start: function(event, ui){ alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
});

2、常用参数(选项) (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样式

(2)appendTo:

[类型]Element, Selector(HTML元素对象或选择器)
[默认值]‘parent’ 父元素
[产生影响]
用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.
[代码示例]
$(‘.selector’).draggable({ appendTo: ‘body’ });

(3)axis:

[类型]String, Boolean(可取的值有’x', ‘y’, false)
‘x’: 只能水平拖动
‘y’: 只能垂直拖动
false: 既可以水平, 也可以垂直拖动.
[默认值]false, 不限制拖动的方向
[产生影响]
约束拖动过程中的取向.
[代码示例]
$(‘.selector’).draggable({ axis: ‘x’ });

(4)containment:

[类型]选择器, 元素, 字符串, 数组.
选择器: 只能在选择器约束的元素内拖动
元素: 只能在给定的元素内拖动
字符串:
parent: 只能在父容器内拖动
document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条…
数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
false: 不限制拖动的活动范围
[默认值]false
[产生影响]
影响指定可拖动控件的活动区域.
[代码示例]
$(‘.selector’).draggable({ containment: ‘parent’ });
$(‘.selector’).draggable({ containment: ‘#demo-frame’ });

(5)cursor:

[类型]字符串.
[默认值]‘auto’
[产生影响]
影响指定可拖动控件在拖动过程中的鼠标样式, 该样式设定之后, 需要控件的原始元素支持指定的cursor样式, 如果指定的值原始元素不支持, 则使用原始元素默认的cursor样式.
[代码示例]
$(‘.selector’).draggable({ cursor: ‘crosshair’ });

(6)cursorAt:

 

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

相关文章
网友点评