UI/API/1.7/Droppable

概述
参数
事件
方法
主题

jQuery UI Droppable

jQuery UI Droppable 插件可以填充被选择的元素(通过拖动进行填充). 你可以指定哪些draggable可以被允许填充.

所有的回调函数接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 :

ui.draggable - 当前拖动的draggable对象,jQuery对象.
ui.helper - 当前拖动的辅助元素,jQuery对象.
ui.position - 当前拖动的辅助元素的位置 { top: , left: }
ui.offset - 当前拖动的辅助元素的绝对位置 { top: , left: }

其他附加文件

UI Core
UI Draggable

创建div droppable (一个可以填充draggable的对象).

$("#draggable").draggable();
    $("#droppable").droppable({
      drop: function() { alert('dropped'); }
    });

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.draggable.js"></script>
  <script type="text/javascript" src="ui/ui.droppable.js"></script>
  <style type="text/css">
    #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
    #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#draggable").draggable();
    $("#droppable").droppable({
      drop: function() { alert('dropped'); }
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>

</body>
</html>

accept

类型:

Selector, Function

默认值:

'*'

接受所有符合选择器条件的draggable对象. 如果指定了一个函数, 该函数要求为页面上每个draggable对象(符合函数第一个条件的对象)提供一个过滤器.如果要这些元素被dropable接受,该函数需要返回true.
代码示例
使用指定的accept参数初始化一个droppable.
```
$('.selector').droppable({ accept: '.special' });
```
在初始化后设置或者获取accept参数.
```
//获取
var accept = $('.selector').droppable('option', 'accept');
//设置
$('.selector').droppable('option', 'accept', '.special');
```
activeClass

类型:

String

默认值:

false

如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式.
代码示例
使用指定的activeClass参数初始化一个droppable.
```
$('.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-droppable类在进行时添加. 这可能会使在初始化数百个元素执行.droppable()时使性能得到理想的优化.
代码示例
使用指定的addClasses参数初始化一个droppable.
```
$('.selector').droppable({ addClasses: false });
```
在初始化后设置或者获取addClasses参数.
```
//获取
var addClasses = $('.selector').droppable('option', 'addClasses');
//设置
$('.selector').droppable('option', 'addClasses', false);
```
greedy

类型:

Boolean

默认值:

false

如果设置为true,将在嵌套的droppable对象中组织事件的传播.
代码示例
使用指定的greedy参数初始化一个droppable.
```
$('.selector').droppable({ greedy: true });
```
在初始化后设置或者获取greedy参数.
```
//获取
var greedy = $('.selector').droppable('option', 'greedy');
//设置
$('.selector').droppable('option', 'greedy', true);
```
hoverClass

类型:

String

默认值:

false

如果设置了该参数,将在一个被允许的draggable对象悬停在droppable对象上时向droppable对象添加一个指定的样式.
代码示例
使用指定的hoverClass参数初始化一个droppable.
```
$('.selector').droppable({ hoverClass: 'drophover' });
```
在初始化后设置或者获取hoverClass参数.
```
//获取
var hoverClass = $('.selector').droppable('option', 'hoverClass');
//设置
$('.selector').droppable('option', 'hoverClass', 'drophover');
```
scope

类型:

String

默认值:

'default'

用来设置draggle对象和droppable对象的组, 除了droppable中的accept属性指定的元素外,和droppable对象相同组的draggable对象也被允许添加到droppable对象中.
代码示例
使用指定的scope参数初始化一个droppable.
```
$('.selector').droppable({ scope: 'tasks' });
```
在初始化后设置或者获取scope参数.
```
//获取
var scope = $('.selector').droppable('option', 'scope');
//设置
$('.selector').droppable('option', 'scope', 'tasks');
```
tolerance

类型:

String

默认值:

'intersect'
指定使用那种模式来测试一个draggable"经过"一个droppable对象. 允许使用的值: 'fit', 'intersect', 'pointer', 'touch'.
- fit: draggable 完全重叠到droppable
- intersect: draggable 和droppable至少重叠50%
- pointer: 鼠标重叠到droppable
- touch: draggable和droppable的任意重叠
代码示例
使用指定的tolerance参数初始化一个droppable.
```
$('.selector').droppable({ tolerance: 'fit' });
```
在初始化后设置或者获取tolerance参数.
```
//获取
var tolerance = $('.selector').droppable('option', 'tolerance');
//设置
$('.selector').droppable('option', 'tolerance', 'fit');
```

activate

类型:

dropactivate

这个事件会在任何允许的draggable对象开始拖动时触发. 它可以用来在你想让droppable对象在可以被填充的时"亮起来"的时候.
代码示例
提供一个回调函数对activate事件进行操作.
```
$('.selector').droppable({
   activate: function(event, ui) { ... }
});
```
使用dropactivate类型来绑定activate事件.
```
$('.selector').bind('dropactivate', function(event, ui) {
  ...
});
```
deactivate

类型:

dropdeactivate

此事件会在任何允许的draggable对象停止拖动时触发.
代码示例
提供一个回调函数对deactivate事件进行操作.
```
$('.selector').droppable({
   deactivate: function(event, ui) { ... }
});
```
使用dropdeactivate类型来绑定deactivate事件.
```
$('.selector').bind('dropdeactivate', function(event, ui) {
  ...
});
```
over

类型:

dropover

此事件会在一个允许的draggable对象"经过"(根据tolerance参数的定义判断)这个droppable对象时触发.
代码示例
提供一个回调函数对over事件进行操作.
```
$('.selector').droppable({
   over: function(event, ui) { ... }
});
```
使用dropover类型来绑定over事件.
```
$('.selector').bind('dropover', function(event, ui) {
  ...
});
```
out

类型:

dropout

此时间会在一个允许的draggable对象离开(根据tolerance参数的定义判断)这个droppable对象时触发.
代码示例
提供一个回调函数对out事件进行操作.
```
$('.selector').droppable({
   out: function(event, ui) { ... }
});
```
使用dropout类型来绑定out事件.
```
$('.selector').bind('dropout', function(event, ui) {
  ...
});
```
drop

类型:

drop

这个事件会在一个允许的draggable对象填充进这个droppable对象时触发. 回调函数中, $(this) 表示被填充的droppable对象. ui.draggable 表示draggable对象.
代码示例
提供一个回调函数对drop事件进行操作.
```
$('.selector').droppable({
   drop: function(event, ui) { ... }
});
```
使用drop类型来绑定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参数. 如果没有提供参数值则是获取.

jQuery UI Droppable插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.droppable.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。

jQuery UI CSS Framework classes示例

Note: 注：这是一个示例droppable插件所产生的标记,而不是你应该使用的标记.创建一个droppable唯一需要的标记是 <div></div>.

部件

动画

UI/API/1.7/Droppable

jQuery UI Droppable

概述

其他附加文件

示例

参数

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

事件

代码示例

代码示例

代码示例

代码示例

代码示例

方法

主题

jQuery UI CSS Framework classes示例