[jQuery]UI/API/1.8/Droppable

UI/API/1.8/Droppable

綜述

jQuery的UI Droppable plugin 讓選定元素具有droppable的屬性（意思就是他們可以接受被draggables放開的元素)。你也可以指定要接受哪些draggable放開的元素。

所有的回調（start, stop, drag）接受兩個參數：原始的瀏覽器事件(event)，ui對象，參考以下的內容：

• ui.draggable -目前可以被拖曳的元素，是一個jQuery物件
• ui.helper -當前可拖放助手，是一個jQuery物件
• ui.position -draggable helper目前的位置{ top: , left: }
• ui.offset -draggable helper目前的絕對位置{ top: , left: }

選項

disable

型態：Boolean 預設值:false

禁用（true）或允許（false）物件droppable屬性。 可以在初始化的時候設定（第一次創建）draggable。

Code examples

初始化droppable物件的 disabled選項

$( ".selector" ).droppable({ disabled: true });

在初始化之後取得或設定disabled選項

//獲取 var disabled = $( ".selector" ).droppable( "option", "disabled" ); //設定 $( ".selector" ).droppable( "option", "disabled", true );

accept

型態：Selector, Function 預設值:'*'

droppable會接受所有selector選擇的draggable物件。 如果參數為Function，每一次draggable的時候都會呼叫這個指定的Function。 如果這個draggable動作是可以被接受的，那麼這個Function就要回傳true。

Code examples

初始化droppable物件的accept選項

$( ".selector" ).droppable({ accept: '.special' });

在初始化之後取得或設定accept選項

//獲取 var accept = $( ".selector" ).droppable( "option", "accept" ); //設定 $( ".selector" ).droppable( "option", "accept", '.special' );

activeClass

型態：String 預設值:false

當draggable正在執行的時候，指定的activeClass會被加入。

Code examples

初始化droppable物件的activeClass選項

$( ".selector" ).droppable({ activeClass: 'ui-state-highlight' });

在初始化之後取得或設定activeClass選項

//獲取 var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); //設定 $( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' );

           

addClasses

型態：Boolean 預設值:true

如果參數設定為false，就不會增加 ui-draggable 這個類別。 這是以效能最佳化作為目標 。draggable() 會對許多元素作初始化。

Code examples

初始化droppable物件的addClasses選項

$( ".selector" ).droppable({ addClasses: false });

在初始化之後取得或設定addClasses選項

//獲取 var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); //設定 $( ".selector" ).droppable( "option", "addClasses", false );

greedy

型態：Boolean 預設值:false

如果參數設定為true，則不允許巢狀的droppable。 舉例來說，若有兩層div物件(都是droppable的)，將一個draggable物件拖曳至內層div時， 參數設定為true則外層不會觸發dropped，若參數設定為false則外層會觸發dropped。

Code examples

初始化droppable物件的greedy選項

$( ".selector" ).droppable({ greedy: true });

在初始化之後取得或設定greedy選項

//獲取 var greedy = $( ".selector" ).droppable( "option", "greedy" ); //設定 $( ".selector" ).droppable( "option", "greedy", true );

hoverClass

型態：String 預設值:false

如果指定了這個參數， 拖曳draggable物件經過至droppable物件上方的時候，指定的class會增加到droppable物件上。

Code examples

初始化droppable物件的hoverClass選項

$( ".selector" ).droppable({ hoverClass: 'drophover' });

在初始化之後取得或設定hoverClass選項

//獲取 var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); //設定 $( ".selector" ).droppable( "option", "hoverClass", 'drophover' );

scope

型態：String 預設值:'default'

用於配對draggable物件和droppable物件。 除了droppable指定的accept物件以外， 和droppable擁有相同scope的draggable物件也同樣可以被droppable物件接受。

Code examples

初始化droppable物件的scope選項

$( ".selector" ).droppable({ scope: 'tasks' });

在初始化之後取得或設定scope選項

//獲取 var scope = $( ".selector" ).droppable( "option", "scope" ); //設定 $( ".selector" ).droppable( "option", "scope", 'tasks' );

tolerance

型態：String 預設值:'tolerance'

選擇一種模式，來判斷一個draggable物件是否有"經過"一個droppable物件。 可接受的參數：'fit', 'intersect', 'pointer', 'touch' fit ：draggable物件和droppable完全重疊 intersect ：draggable 和droppable至少重疊50% pointer ：滑鼠指標重疊droppable touch ：draggable和droppable有任何重疊

Code examples

初始化droppable物件的tolerance選項

$( ".selector" ).droppable({ tolerance: 'fit' });

在初始化之後取得或設定tolerance選項

//獲取 var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); //設定 $( ".selector" ).droppable( "option", "tolerance", 'fit' );

事件

activate

型態：dropactivate

這個事件會在任何一個draggable物件開始拖曳的時候觸發。 例如在開始拖曳一個draggable物件的時候，我們可以讓可以接受的droppable物件亮起來。

Code examples

初始化 activate 事件

$( ".selector" ).droppable({ activate: function(event, ui) { ... } });

綁定 activate 事件

$( ".selector" ).bind( "dropactivate", function(event, ui) { ... });

deactivate

型態：dropdeactivate

這個事件會在可接受的draggable物件停止拖曳的時候觸發。

Code examples

初始化 deactivate 事件

$( ".selector" ).droppable({ deactivate: function(event, ui) { ... } });

綁定 deactivate 事件

$( ".selector" ).bind( "dropdeactivate", function(event, ui) { ... });

over

型態：dropover

這個事件會在draggable物件"經過"droppable物件的時候觸發(經過的定義參考tolerance屬性)

Code examples

初始化 over 事件

$( ".selector" ).droppable({ over: function(event, ui) { ... } });

綁定 over 事件

$( ".selector" ).bind( "dropover", function(event, ui) { ... });

out

型態：dropout

這個事件會在一個draggable物件離開一個droppable的時候觸發 (離開的定義參考tolerance屬性)

Code examples

初始化 out 事件

$( ".selector" ).droppable({ out: function(event, ui) { ... } });

綁定 out 事件

$( ".selector" ).bind( "dropout", function(event, ui) { ... });

drop

型態：drop

這個事件會在draggable物件填入droppable物件的時候觸發。 在回調函數中，$(this)代表已經被draggable物件填充的droppable物件。 ui.draggable代表draggable物件。

Code examples

初始化 drop 事件

$( ".selector" ).droppable({ drop: function(event, ui) { ... } });

綁定 drop 事件

$( ".selector" ).bind( "drop", function(event, ui) { ... });

方法

destroy

用法：.droppable( "destroy" )

完全移除droppable的功能。讓元素回到初始狀態。

disable

用法：.droppable( "disable" )

禁止droppable的功能。

enable

用法：.droppable( "enable" )

啟用droppable。

option

用法：.droppable( "option" , optionName , [value])

獲取或設置任何droppable的選項。如果沒有指定值，將作為一個 getter。

option

用法：.droppable( "option" , options)

一次設定多個option，必須傳入一個option物件

widget

用法：.droppable( "widget")

回傳 .ui-droppable物件