您的位置:首页 - jQuery
用jQuery UI的droppable拖放元素

先看droppable的一个例子:http://keleyi.com/a/bjad/760qp325.htm

addClasses: 用来设置是否添加ui-draggable样式.
appendTo: 设置追加到什么地方
axis: 设置拖动的方向
cancel, handle: 设置控制整个控件拖动动作的区域, cancel指定区域不能拖动, handle指定区域控制控件拖动.
connectToSortable: 需要和sortable集成.
containment: 设置控件可拖动范围
cursor, cursorAt: 设置拖动过程中, 鼠标的样式及相对空间自身的位置.
delay, distance: 设置拖动的延迟, delay设置延迟时间, distance设置延迟距离, 目的是防止误点击带来的不期望拖动.
grid: 设置拖动过程移动的单位(以小格的方式移动)
helper: 设置拖动过程中, 跟随鼠标移动的组件.
iframeFix: 解决拖动过程中与iframe层叠后的事件问题.
opacity: 拖动过程helper的不透明度.
refreshPositions: 设置后drop过程中, 鼠标每次移动都会计算位置.
revert, revertDuration: 设置撤销移动相关.
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标.
scroll, scrollSensitivity, scrollSpeed: 设置拖动过程中带来的滚动条相关问题.
snap, snapMode, snapTolerance: 设置吸附的相关属性.
stack, zIndex: 设置控件的层次.
·概述
配合draggable插件,允许拖放到任何DOM元素内。


所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象
ui.draggable - 表示当前被拖拽的元素的JQuery对象
ui.helper - 表示当前被拖放的元素的JQuery对象
ui.position - 表示当前被拖拽的相对坐标值对象{top,left}
ui.offset - 表示当前被拖拽的元素的绝对坐标值对象{top,left}

·参数(参数名 : 参数类型 : 默认值)
accept : Selector, Function : '*'
仅允许符合适配器的元素激活拖放的事件。(如果是函数,则此函数会在页面上所有元素被调用,函数的返回值必须是布尔值。)
初始:$('.selector').droppable({ accept: '.special' });
获取:var accept = $('.selector').droppable('option', 'accept');
设置:$('.selector').droppable('option', 'accept', '.special');

activeClass : String : false
如果设置值,则当有拖拽事件发生时,为页面上所有允许(accept)的元素添加此样式。
初始:$('.selector').droppable({ activeClass: 'ui-state-highlight' });
获取:var activeClass = $('.selector').droppable('option', 'activeClass');
设置:$('.selector').droppable('option', 'activeClass', 'ui-state-highlight');

addClasses : Boolean : true
设置为false,可以阻止ui-droppable样式添加至可拖放的对象。(这样可以获取一定的性能优化)
初始:$('.selector').droppable({ addClasses: false });
获取:var addClasses = $('.selector').droppable('option', 'addClasses');
设置:$('.selector').droppable('option', 'addClasses', false);

greedy : Boolean : false
是否防止嵌套的droppable事件被传播。
初始:$('.selector').droppable({ greedy: true });
获取:var greedy = $('.selector').droppable('option', 'greedy');
设置:$('.selector').droppable('option', 'greedy', true);

hoverClass : String : false
当拖拽元素移至带有可拖放插件的元素上时,为元素添加指定的样式。
初始:$('.selector').droppable({ hoverClass: 'drophover' });
获取:var hoverClass = $('.selector').droppable('option', 'hoverClass');
设置:$('.selector').droppable('option', 'hoverClass', 'drophover');

scope : String : 'default'
设置元素只允许具有相同scope值拖拽元素激活此拖放元素。
初始:$('.selector').droppable({ scope: 'tasks' });
获取:var scope = $('.selector').droppable('option', 'scope');
设置:$('.selector').droppable('option', 'scope', 'tasks');

tolerance : String : 'intersect'
判断一个可拖拽元素被【放到】一个可拖放元素的判断模式。(可选值:'fit', 'intersect', 'pointer', 'touch')
fit:拖拽元素完全覆盖拖放元素
intersect:拖拽元素至少50%覆盖拖放元素
pointer:鼠标指针重叠在可拖放元素上
touch:只要有任何重叠即发生
初始:$('.selector').droppable({ tolerance: 'fit' });
获取:var tolerance = $('.selector').droppable('option', 'tolerance');
设置:$('.selector').droppable('option', 'tolerance', 'fit');


·事件
activate
当任何可拖拽元素开始拖拽动作时激活此事件。
初始:$('.selector').droppable({ activate: function(event, ui) { ... } });
绑定:$('.selector').bind('dropactivate', function(event, ui) { ... });

deactivate
当任何可拖拽元素停止拖拽动作时激活此事件。
初始:$('.selector').droppable({ deactivate: function(event, ui) { ... } });
绑定:$('.selector').bind('dropdeactivate', function(event, ui) { ... });

over
当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素时激活。
初始:$('.selector').droppable({ over: function(event, ui) { ... } });
绑定:$('.selector').bind('dropover', function(event, ui) { ... });

out
当一个被允许(accept)的可拖拽元素移出可拖放元素时激活。
初始:$('.selector').droppable({ out: function(event, ui) { ... } });
绑定:$('.selector').bind('dropout', function(event, ui) { ... });

drop
当一个被允许(accept)的可拖拽元素移动并覆盖可拖放元素,松开鼠标时激活。
初始:$('.selector').droppable({ drop: function(event, ui) { ... } });
绑定:$('.selector').bind('drop', function(event, ui) { ... });


·方法
destory
从元素中移除拖拽功能。
用法:.droppable( 'destroy' )

disable
禁用元素的拖拽功能。
用法:.droppable( 'disable' )

enable
启用元素的拖拽功能。
用法:.droppable( 'enable' )

option
获取或设置元素的参数。
用法:.droppable( 'option' , optionName , [value] )
本站导航
相关文章
柯乐义 Copyright© keleyi.com