JQuery UI - droppable ，转载
- ·概述
- 配合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] )
