# Droppable Widget
Categories: [Interactions](http://www.css88.com/jquery-ui-api/category/interactions/ "View all posts in Interactions")
## version added: 1.0
**Description:** 创建拖动元素的目标。
## QuickNav[Examples](#entry-examples)
### Options
+ [accept](#option-accept)
+ [activeClass](#option-activeClass)
+ [addClasses](#option-addClasses)
+ [disabled](#option-disabled)
+ [greedy](#option-greedy)
+ [hoverClass](#option-hoverClass)
+ [scope](#option-scope)
+ [tolerance](#option-tolerance)
### Methods
+ [destroy](#method-destroy)
+ [disable](#method-disable)
+ [enable](#method-enable)
+ [option](#method-option)
+ [widget](#method-widget)
### Events
+ [activate](#event-activate)
+ [create](#event-create)
+ [deactivate](#event-deactivate)
+ [drop](#event-drop)
+ [out](#event-out)
+ [over](#event-over)
jQuery UI拖放插件可以使所选元素可拖放（这意味着[draggables](/draggable/)拖动可以被拖放接受）。您可以指定哪个拖动被接受。
### Dependencies（依赖性）
* [UI Core](/category/ui-core/)
* [Widget Factory](/jQuery.widget/)
* [Mouse Interaction](/mouse/)
## Options
### accept**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [Function](http://api.jquery.com/Types/#Function)()
**Default:** `"*"`控制可拖动的元素被拖放接受。**支持多种类型：**
* **Selector**: 一个选择器可拖动的元素。
* **Function**: 函数将被调用页面上的每一个可拖动的（传递给函数的第一个参数）。该函数必须返回`true`，如果可拖动应该接受。
**Code examples:**
使用指定的`accept`参数初始化一个droppable：
```
$( ".selector" ).droppable({ accept: ".special" });
```
在初始化后设置或者获取`accept`参数：
```
// getter
var accept = $( ".selector" ).droppable( "option", "accept" );
// setter
$( ".selector" ).droppable( "option", "accept", ".special" );
```
### activeClass**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `false`如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式。**Code examples:**
使用指定的`activeClass` 参数初始化一个droppable：
```
$( ".selector" ).droppable({ activeClass: "ui-state-highlight" });
```
在初始化后设置或者获取`activeClass`参数：
```
// getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
// setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );
```
### addClasses**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `true`如果设置为`false`, 可以防止`ui-droppable`类在进行时添加. 这可能会使在初始化数百个元素执行`.droppable()`时使性能得到理想的优化.**Code examples:**
使用指定的`addClasses` 参数初始化一个droppable：
```
$( ".selector" ).droppable({ addClasses: false });
```
在初始化后设置或者获取`addClasses`参数：
```
// getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
// setter
$( ".selector" ).droppable( "option", "addClasses", false );
```
### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为 `true`将禁止拖放。**Code examples:**
使用指定的`disabled` 参数初始化一个droppable：
```
$( ".selector" ).droppable({ disabled: true });
```
在初始化后设置或者获取`disabled`参数：
```
// getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
// setter
$( ".selector" ).droppable( "option", "disabled", true );
```
### greedy**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`默认情况下，当一个元素被放到嵌套的放置（droppable）对象时，每个放置（droppable）对象都将接收到这个元素。然而，当设置这个选项为`true`时，任何父级的放置（droppable）对象不会接收元素。`drop`事件将依然会正常的泡沫，但`event.target`查看哪个放置（droppable）对象接受了拖动元素。**Code examples:**
使用指定的`greedy` 参数初始化一个droppable：
```
$( ".selector" ).droppable({ greedy: true });
```
在初始化后设置或者获取`greedy`参数：
```
// getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
// setter
$( ".selector" ).droppable( "option", "greedy", true );
```
### hoverClass**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `false`如果设置了该参数,将在一个被允许的拖动元素悬停在放置（droppable）对象上时，向放置（droppable）对象添加一个指定的样式.**Code examples:**
使用指定的`hoverClass` 参数初始化一个droppable：
```
$( ".selector" ).droppable({ hoverClass: "drop-hover" });
```
在初始化后设置或者获取`hoverClass`参数：
```
// getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
// setter
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );
```
### scope**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"default"`用来设置拖动（draggle）元素和放置（droppable）对象的集合, 除了droppable中的[`accept`](#option-accept)属性指定的元素外,和放置（droppable）对象相同集合的放置（droppable）对象也被允许添加到放置（droppable）对象中.**Code examples:**
使用指定的`scope` 参数初始化一个droppable：
```
$( ".selector" ).droppable({ scope: "tasks" });
```
在初始化后设置或者获取`scope`参数：
```
// getter
var scope = $( ".selector" ).droppable( "option", "scope" );
// setter
$( ".selector" ).droppable( "option", "scope", "tasks" );
```
### tolerance**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"intersect"`指定使用那种模式来测试一个拖动(draggable)元素"经过"一个放置（droppable）对象。 允许使用的值:
* `"fit"`: 拖动(draggable)元素 完全重叠到放置（droppable）对象。
* `"intersect"`: 拖动(draggable)元素 和放置（droppable）对象至少重叠50%。
* `"pointer"`: 鼠标重叠到放置（droppable）对象上。
* `"touch"`: 拖动(draggable)元素 和放置（droppable）对象的任意重叠
**Code examples:**
使用指定的`tolerance` 参数初始化一个droppable：
```
$( ".selector" ).droppable({ tolerance: "fit" });
```
在初始化后设置或者获取`tolerance`参数：
```
// getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
// setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );
```
## Methods（方法）
### destroy()
完全移除拖放功能. 这将使元素返回到之前的初始化状态.
* 这个方法不接受任何参数
**Code examples:**
调用destroy 方法
```
$( ".selector" ).droppable( "destroy" );
```
### disable()
禁用拖放。
* 这个方法不接受任何参数
**Code examples:**
调用disable 方法
```
$( ".selector" ).droppable( "disable" );
```
### enable()
启用拖放。
* 这个方法不接受任何参数
**Code examples:**
调用enable 方法
```
$( ".selector" ).droppable( "enable" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
通过指定的`optionName`获取当前关联的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要获取值的选项名
**Code examples:**
调用这个方法：
```
var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
获取一个对象，它包含表示当前droppable的选项hash的键/值对。
* 这个方法不接受任何参数
**Code examples:**
调用这个方法：
```
var options = $( ".selector" ).droppable( "option" );
```
### option( optionName, value )
通过指定的`optionName`，设置droppable的相关选项值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要设置值的选项名。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要设置选项的值。
**Code examples:**
调用这个方法：
```
$( ".selector" ).droppable( "option", "disabled", true );
```
### option( options )
为droppable设置一个或多个选项。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)设置的选项/值对的对象。
**Code examples:**
调用这个方法：
```
$( ".selector" ).droppable( "option", { disabled: true } );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一个`jQuery` ，它包含了droppable元素。
* 这个方法不接受任何参数
**Code examples:**
调用widget 方法
```
var widget = $( ".selector" ).droppable( "widget" );
```
## Events
### activate( event, ui )Type: `dropactivate`
这个事件会在任何允许的draggable对象开始拖动时触发。它可以用来在你想让droppable对象在可以被填充的时"亮起来"的时候。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **draggable**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表的拖动元素。
* **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被拖动元素的助手。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的CSS的position（位置）对象，如`{ top, left }`。
* **offset**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的偏移位置对象，如`{ top, left }`。
**Code examples:**
使用指定的activate 回调初始化一个droppable：
```
$( ".selector" ).droppable({
activate: function( event, ui ) {}
});
```
绑定一个事件监听到dropactivate事件:
```
$( ".selector" ).on( "dropactivate", function( event, ui ) {} );
```
### create( event, ui )Type: `dropcreate`
此事件会在droppable创建时触发。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意：`ui`对象是空对象，包括是为了和其他事件的一致性。_
**Code examples:**
使用指定的create 回调初始化一个droppable：
```
$( ".selector" ).droppable({
create: function( event, ui ) {}
});
```
绑定一个事件监听到dropcreate事件：
```
$( ".selector" ).on( "dropcreate", function( event, ui ) {} );
```
### deactivate( event, ui )Type: `dropdeactivate`
此事件会在任何允许的draggable对象停止拖动时触发.
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **draggable**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表的拖动元素。
* **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被拖动元素的助手。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的CSS的position（位置）对象，如`{ top, left }`。
* **offset**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的偏移位置对象，如`{ top, left }`。
**Code examples:**
使用指定的deactivate 回调初始化一个droppable：
```
$( ".selector" ).droppable({
deactivate: function( event, ui ) {}
});
```
绑定一个事件监听到dropdeactivate事件：
```
$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} );
```
### drop( event, ui )Type: `drop`
这个事件会在一个允许的拖动（draggable）元素填充进这个放置（droppable）对象时触发.（基于[`tolerance`](#option-tolerance)选项）。（愚人码头注释： 回调函数中, $(this) 表示被填充的droppable对象. ui.draggable 表示draggable对象.）
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **draggable**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表的拖动元素。
* **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被拖动元素的助手。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的CSS的position（位置）对象，如`{ top, left }`。
* **offset**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的偏移位置对象，如`{ top, left }`。
**Code examples:**
使用指定的drop 回调初始化一个droppable：
```
$( ".selector" ).droppable({
drop: function( event, ui ) {}
});
```
绑定一个事件监听到drop事件：
```
$( ".selector" ).on( "drop", function( event, ui ) {} );
```
### out( event, ui )Type: `dropout`
此事件会在一个允许的拖动（draggable）元素离开这个放置（droppable）对象时触发（基于[`tolerance`](#option-tolerance)选项）。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意：`ui`对象是空对象，包括是为了和其他事件的一致性。_
**Code examples:**
使用指定的out 回调初始化一个droppable：
```
$( ".selector" ).droppable({
out: function( event, ui ) {}
});
```
绑定一个事件监听到dropout事件：
```
$( ".selector" ).on( "dropout", function( event, ui ) {} );
```
### over( event, ui )Type: `dropover`
此事件会在一个允许的拖动（draggable）元素经过这个放置（droppable）对象时触发（基于[`tolerance`](#option-tolerance)选项）。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **draggable**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表的拖动元素。
* **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一个jQuery对象代表被拖动元素的助手。
* **position**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的CSS的position（位置）对象，如`{ top, left }`。
* **offset**Type: [Object](http://api.jquery.com/Types/#Object)当前可拖动助手的偏移位置对象，如`{ top, left }`。
**Code examples:**
使用指定的over 回调初始化一个droppable：
```
$( ".selector" ).droppable({
over: function( event, ui ) {}
});
```
绑定一个事件监听到dropover事件：
```
$( ".selector" ).on( "dropover", function( event, ui ) {} );
```
## Example:
#### A pair of draggable and droppable elements.
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>droppable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<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.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>
<script>
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function() {
alert( "dropped" );
}
});
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架（CSS Framework）
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget