jQuery UI API - 可放置小部件(Droppable Widget)

所屬類別

交互(Interactions)

用法

描述:為可拖拽小部件創(chuàng)建目標(biāo)。

版本新增:1.0

依賴:

注釋:jQuery UI 可放置(Droppable)插件讓被選元素可放置(意味著它們?cè)谕献Ш蠼邮鼙环胖茫?。您可以逐個(gè)指定哪一個(gè) draggable 會(huì)接受。

快速導(dǎo)航

選項(xiàng) 方法 事件

選項(xiàng) 類型 描述 默認(rèn)值
accept Selector 或 Function() 控制哪個(gè)可拖拽(draggable)元素可被 droppable 接受。

支持多個(gè)類型:

  • Selector:一個(gè)選擇器,指定哪個(gè)可拖拽(draggable)元素可被 droppable 接受。
  • Function():一個(gè)函數(shù),將被頁面上每個(gè) draggable 調(diào)用(作為第一個(gè)參數(shù)傳遞給函數(shù))。如果 draggable 被接受,該函數(shù)必須返回 true。

代碼實(shí)例:

初始化帶有指定 accept 選項(xiàng)的 droppable:

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

在初始化后,獲取或設(shè)置 accept 選項(xiàng):

// getter
var accept = $( ".selector" ).droppable( "option", "accept" );
 
// setter
$( ".selector" ).droppable( "option", "accept", ".special" );
	
"*"
activeClass String 如果指定了該選項(xiàng),當(dāng)一個(gè)可接受的 draggable 被拖拽時(shí),class 將被添加到 droppable。

代碼實(shí)例:

初始化帶有指定 activeClass 選項(xiàng)的 droppable:

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

在初始化后,獲取或設(shè)置 activeClass 選項(xiàng):

// getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
 
// setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );
	
false
addClasses Boolean 如果設(shè)置為 false,將防止 ui-droppable class 被添加。這在數(shù)百個(gè)元素上調(diào)用 .droppable() 時(shí)有助于性能優(yōu)化。

代碼實(shí)例:

初始化帶有指定 addClasses 選項(xiàng)的 droppable:

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

在初始化后,獲取或設(shè)置 addClasses 選項(xiàng):

// getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
 
// setter
$( ".selector" ).droppable( "option", "addClasses", false );
	
true
disabled Boolean 如果設(shè)置為 true,則禁用該 droppable。

代碼實(shí)例:

初始化帶有指定 disabled 選項(xiàng)的 droppable:

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

在初始化后,獲取或設(shè)置 disabled 選項(xiàng):

// getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
 
// setter
$( ".selector" ).droppable( "option", "disabled", true );
	
false
greedy Boolean 默認(rèn)情況下,當(dāng)一個(gè)元素被放置在嵌套是 droppable 上時(shí),每個(gè) droppable 將接收該元素。然而,通過設(shè)置該選項(xiàng)為 true,任何父元素的 droppable 將無法接收該元素。 drop 事件仍將照常,但會(huì)檢查 event.target 以便查看哪個(gè) droppable 接收 draggable 元素。

代碼實(shí)例:

初始化帶有指定 greedy 選項(xiàng)的 droppable:

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

在初始化后,獲取或設(shè)置 greedy 選項(xiàng):

// getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
 
// setter
$( ".selector" ).droppable( "option", "greedy", true );
	
false
hoverClass String 如果指定了該選項(xiàng),當(dāng)一個(gè)可接受 draggable 被覆蓋在 droppable 上時(shí),class 將被添加到 droppable。

代碼實(shí)例:

初始化帶有指定 hoverClass 選項(xiàng)的 droppable:

$( ".selector" ).droppable({ hoverClass: "drop-hover" });
	

在初始化后,獲取或設(shè)置 hoverClass 選項(xiàng):

// getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
 
// setter
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );
	
false
scope String 用于組合配套 draggable 和 droppable 項(xiàng),除了 droppable 的 accept 選項(xiàng)之外。一個(gè)與 droppable 帶有相同的 scope 值的 draggable 會(huì)被該 droppable 接受。

代碼實(shí)例:

初始化帶有指定 scope 選項(xiàng)的 droppable:

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

在初始化后,獲取或設(shè)置 scope 選項(xiàng):

// getter
var scope = $( ".selector" ).droppable( "option", "scope" );
 
// setter
$( ".selector" ).droppable( "option", "scope", "tasks" );
	
"default"
tolerance String 指定用于測(cè)試一個(gè) draggable 是否覆蓋在一個(gè) droppable 上的模式??赡艿闹担?br />
  • "fit":draggable 完全重疊在 droppable 上。
  • "intersect":draggable 重疊在 droppable 上,兩個(gè)方向上至少 50%。
  • "pointer":鼠標(biāo)指針重疊在 droppable 上。
  • "touch":draggable 重疊在 droppable 上,任何數(shù)量皆可。

代碼實(shí)例:

初始化帶有指定 tolerance 選項(xiàng)的 droppable:

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

在初始化后,獲取或設(shè)置 tolerance 選項(xiàng):

// getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
 
// setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );
	
"intersect"

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 droppable 功能。這會(huì)把元素返回到它的預(yù)初始化狀態(tài)。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例:

調(diào)用 destroy 方法:

$( ".selector" ).droppable( "destroy" );
	
disable() jQuery (plugin only) 禁用 droppable。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例:

調(diào)用 disable 方法:

$( ".selector" ).droppable( "disable" );
	
enable() jQuery (plugin only) 啟用 droppable。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例:

調(diào)用 enable 方法:

$( ".selector" ).droppable( "enable" );
	
option( optionName ) Object 獲取當(dāng)前與指定的 optionName 關(guān)聯(lián)的值。
  • optionName
    類型:String
    描述:要獲取的選項(xiàng)的名稱。

代碼實(shí)例:

調(diào)用該方法:

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
	
option() PlainObject 獲取一個(gè)包含鍵/值對(duì)的對(duì)象,鍵/值對(duì)表示當(dāng)前 droppable 選項(xiàng)哈希。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例:

調(diào)用該方法:

var options = $( ".selector" ).droppable( "option" );
	
option( optionName, value ) jQuery (plugin only) 設(shè)置與指定的 optionName 關(guān)聯(lián)的 droppable 選項(xiàng)的值。
  • optionName
    類型:String
    描述:要設(shè)置的選項(xiàng)的名稱。
  • value
    類型:Object
    描述:要為選項(xiàng)設(shè)置的值。

代碼實(shí)例:

調(diào)用該方法:

$( ".selector" ).droppable( "option", "disabled", true );
	
option( options ) jQuery (plugin only) 為 droppable 設(shè)置一個(gè)或多個(gè)選項(xiàng)。
  • options
    類型:Object
    描述:要設(shè)置的 option-value 對(duì)。

代碼實(shí)例:

調(diào)用該方法:

$( ".selector" ).droppable( "option", { disabled: true } );
	
widget() jQuery 返回一個(gè)包含 droppable 元素的 jQuery 對(duì)象。
  • 該方法不接受任何參數(shù)。

代碼實(shí)例:

調(diào)用 widget 方法:

var widget = $( ".selector" ).droppable( "widget" );
	

事件 類型 描述
activate( event, ui ) dropactivate 當(dāng)一個(gè)可接受的 draggable 開始拖拽時(shí)觸發(fā)。如果您想讓 droppable 被放置時(shí)"點(diǎn)亮",該選項(xiàng)就可以派上用場(chǎng)。
  • event
    類型:Event
  • ui
    類型:Object
    • draggable
      類型:jQuery
      描述:jQuery 對(duì)象,表示 draggable 元素。
    • helper
      類型:jQuery
      描述:jQuery 對(duì)象,表示被拖拽的助手(helper)。
    • position
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前 CSS 位置,比如 { top, left } 對(duì)象。
    • offset
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前偏移位置,比如 { top, left } 對(duì)象。

代碼實(shí)例:

初始化帶有指定 activate 回調(diào)的 droppable:

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

綁定一個(gè)事件監(jiān)聽器到 dropactivate 事件:

$( ".selector" ).on( "dropactivate", function( event, ui ) {} );
	
create( event, ui ) dropcreate 當(dāng) droppable 被創(chuàng)建時(shí)觸發(fā)。
  • event
    類型:Event
  • ui
    類型:Object

注意:ui 對(duì)象是空的,這里包含它是為了與其他事件保持一致性。

代碼實(shí)例:

初始化帶有指定 create 回調(diào)的 droppable:

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

綁定一個(gè)事件監(jiān)聽器到 dropcreate 事件:

$( ".selector" ).on( "dropcreate", function( event, ui ) {} );
	
deactivate( event, ui ) dropdeactivate 當(dāng)一個(gè)可接受的 draggable 停止拖拽時(shí)觸發(fā)。
  • event
    類型:Event
  • ui
    類型:Object
    • draggable
      類型:jQuery
      描述:jQuery 對(duì)象,表示 draggable 元素。
    • helper
      類型:jQuery
      描述:jQuery 對(duì)象,表示被拖拽的助手(helper)。
    • position
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前 CSS 位置,比如 { top, left } 對(duì)象。
    • offset
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前偏移位置,比如 { top, left } 對(duì)象。

代碼實(shí)例:

初始化帶有指定 deactivate 回調(diào)的 droppable:

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

綁定一個(gè)事件監(jiān)聽器到 dropdeactivate 事件:

$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} );
	
drop( event, ui ) drop 當(dāng)一個(gè)可接受的 draggable 被放置在 droppable(基于 tolerance 選項(xiàng))上時(shí)觸發(fā)。
  • event
    類型:Event
  • ui
    類型:Object
    • draggable
      類型:jQuery
      描述:jQuery 對(duì)象,表示 draggable 元素。
    • helper
      類型:jQuery
      描述:jQuery 對(duì)象,表示被拖拽的助手(helper)。
    • position
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前 CSS 位置,比如 { top, left } 對(duì)象。
    • offset
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前偏移位置,比如 { top, left } 對(duì)象。

代碼實(shí)例:

初始化帶有指定 drop 回調(diào)的 droppable:

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

綁定一個(gè)事件監(jiān)聽器到 drop 事件:

$( ".selector" ).on( "drop", function( event, ui ) {} );
	
out( event, ui ) dropout 當(dāng) droppable 被拖拽出 droppable(基于 tolerance 選項(xiàng))時(shí)觸發(fā)。
  • event
    類型:Event
  • ui
    類型:Object

注意:ui 對(duì)象是空的,這里包含它是為了與其他事件保持一致性。

代碼實(shí)例:

初始化帶有指定 out 回調(diào)的 droppable:

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

綁定一個(gè)事件監(jiān)聽器到 dropout 事件:

$( ".selector" ).on( "dropout", function( event, ui ) {} );
	
over( event, ui ) dropover 當(dāng)一個(gè)可接受的 draggable 被拖拽在 droppable(基于 tolerance 選項(xiàng))上時(shí)觸發(fā)。
  • event
    類型:Event
  • ui
    類型:Object
    • draggable
      類型:jQuery
      描述:jQuery 對(duì)象,表示 draggable 元素。
    • helper
      類型:jQuery
      描述:jQuery 對(duì)象,表示被拖拽的助手(helper)。
    • position
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前 CSS 位置,比如 { top, left } 對(duì)象。
    • offset
      類型:Object
      描述:draggable 助手(helper)的當(dāng)前偏移位置,比如 { top, left } 對(duì)象。

代碼實(shí)例:

初始化帶有指定 over 回調(diào)的 droppable:

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

綁定一個(gè)事件監(jiān)聽器到 dropover 事件:

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

實(shí)例

一對(duì) draggable 和 droppable 元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可放置小部件(Droppable Widget)演示</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank" >
  <style>
  #draggable {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  #droppable {
    position: absolute;
    left: 250px;
    top: 0;
    width: 125px;
    height: 125px;
    background: #999;
    color: #fff;
    padding: 10px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-1.10.2.js" rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow" ></script>
</head>
<body>
 
<div id="droppable">請(qǐng)放置到這里!</div>
<div id="draggable">請(qǐng)拖拽我!</div>
 
<script>
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});
</script>
 
</body>
</html>

查看演示