·概述
配合draggable插件，允許拖放到任何DOM元素內(nèi)。
官方示例地址：http://jqueryui.com/demos/droppable/

所有的事件回調(diào)函數(shù)都有兩個參數(shù)：event和ui，瀏覽器自有event對象，和經(jīng)過封裝的ui對象
ui.draggable?– 表示當(dāng)前被拖拽的元素的JQuery對象
ui.helper?– 表示當(dāng)前被拖放的元素的JQuery對象
ui.position?– 表示當(dāng)前被拖拽的相對坐標(biāo)值對象{top,left}
ui.offset?– 表示當(dāng)前被拖拽的元素的絕對坐標(biāo)值對象{top,left}

·參數(shù)（參數(shù)名 : 參數(shù)類型 : 默認(rèn)值）
accept :?Selector, Function : ‘*’
僅允許符合適配器的元素激活拖放的事件。（如果是函數(shù)，則此函數(shù)會在頁面上所有元素被調(diào)用，函數(shù)的返回值必須是布爾值。）
初始：$(‘.selector’).droppable({ accept: ‘.special’ });
獲取：var accept = $(‘.selector’).droppable(‘option’, ‘a(chǎn)ccept’);
設(shè)置：$(‘.selector’).droppable(‘option’, ‘a(chǎn)ccept’, ‘.special’);

activeClass :?String : false
如果設(shè)置值，則當(dāng)有拖拽事件發(fā)生時，為頁面上所有允許（accept）的元素添加此樣式。
初始：$(‘.selector’).droppable({ activeClass: ‘ui-state-highlight’ });
獲取：var activeClass = $(‘.selector’).droppable(‘option’, ‘a(chǎn)ctiveClass’);
設(shè)置：$(‘.selector’).droppable(‘option’, ‘a(chǎn)ctiveClass’, ‘ui-state-highlight’);

addClasses :?Boolean : true
設(shè)置為false，可以阻止ui-droppable樣式添加至可拖放的對象。（這樣可以獲取一定的性能優(yōu)化）
初始：$(‘.selector’).droppable({ addClasses: false });
獲取：var addClasses = $(‘.selector’).droppable(‘option’, ‘a(chǎn)ddClasses’);
設(shè)置：$(‘.selector’).droppable(‘option’, ‘a(chǎn)ddClasses’, false);

greedy :?Boolean : false
是否防止嵌套的droppable事件被傳播。
初始：$(‘.selector’).droppable({ greedy: true });
獲取：var greedy = $(‘.selector’).droppable(‘option’, ‘greedy’);
設(shè)置：$(‘.selector’).droppable(‘option’, ‘greedy’, true);

hoverClass :?String : false
當(dāng)拖拽元素移至帶有可拖放插件的元素上時，為元素添加指定的樣式。
初始：$(‘.selector’).droppable({ hoverClass: ‘drophover’ });
獲取：var hoverClass = $(‘.selector’).droppable(‘option’, ‘hoverClass’);
設(shè)置：$(‘.selector’).droppable(‘option’, ‘hoverClass’, ‘drophover’);

scope :?String : ‘default’
設(shè)置元素只允許具有相同scope值拖拽元素激活此拖放元素。
初始：$(‘.selector’).droppable({ scope: ‘tasks’ });
獲取：var scope = $(‘.selector’).droppable(‘option’, ‘scope’);
設(shè)置：$(‘.selector’).droppable(‘option’, ‘scope’, ‘tasks’);

tolerance :?String : ‘intersect’
判斷一個可拖拽元素被【放到】一個可拖放元素的判斷模式。（可選值：’fit’, ‘intersect’, ‘pointer’, ‘touch’）
fit：拖拽元素完全覆蓋拖放元素
intersect：拖拽元素至少50%覆蓋拖放元素
pointer：鼠標(biāo)指針重疊在可拖放元素上
touch：只要有任何重疊即發(fā)生
初始：$(‘.selector’).droppable({ tolerance: ‘fit’ });
獲取：var tolerance = $(‘.selector’).droppable(‘option’, ‘tolerance’);
設(shè)置：$(‘.selector’).droppable(‘option’, ‘tolerance’, ‘fit’);

·事件
activate
當(dāng)任何可拖拽元素開始拖拽動作時激活此事件。
初始：$(‘.selector’).droppable({ activate: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘dropactivate’, function(event, ui) {? … });

deactivate
當(dāng)任何可拖拽元素停止拖拽動作時激活此事件。
初始：$(‘.selector’).droppable({ deactivate: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘dropdeactivate’, function(event, ui) { … });

over
當(dāng)一個被允許（accept）的可拖拽元素移動并覆蓋可拖放元素時激活。
初始：$(‘.selector’).droppable({ over: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘dropover’, function(event, ui) { … });

out
當(dāng)一個被允許（accept）的可拖拽元素移出可拖放元素時激活。
初始：$(‘.selector’).droppable({ out: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘dropout’, function(event, ui) { … });

drop
當(dāng)一個被允許（accept）的可拖拽元素移動并覆蓋可拖放元素，松開鼠標(biāo)時激活。
初始：$(‘.selector’).droppable({ drop: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘drop’, function(event, ui) { … });

·方法
destory
從元素中移除拖拽功能。
用法：.droppable( ‘destroy’ )

disable
禁用元素的拖拽功能。
用法：.droppable( ‘disable’ )

enable
啟用元素的拖拽功能。
用法：.droppable( ‘enable’ )

option
獲取或設(shè)置元素的參數(shù)。
用法：.droppable( ‘option’ , optionName , [value] )