·概述 配合draggable插件,允许拖放到任何DOM元素内。 官方示例地址:http://jqueryui.com/demos/droppable/ 所有的事件回调函数都有两个参数: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] ) |