Droppable Widget

Categories: Interactions

Droppable Widgetversion added: 1.0

Description: 创建拖动元素的目标。

QuickNavExamples

Options

Methods

Events

jQuery UI拖放插件可以使所选元素可拖放（这意味着draggables拖动可以被拖放接受）。您可以指定哪个拖动被接受。

Dependencies（依赖性）

Options

acceptType: Selector or Function()

Default: "*"
控制可拖动的元素被拖放接受。
支持多种类型：
  • Selector: 一个选择器可拖动的元素。
  • Function: 函数将被调用页面上的每一个可拖动的（传递给函数的第一个参数）。该函数必须返回true，如果可拖动应该接受。
Code examples:

使用指定的accept参数初始化一个droppable：

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

在初始化后设置或者获取accept参数：

1
2
3
4
5
6
 
// getter
var accept = $( ".selector" ).droppable( "option", "accept" );
 
 
// setter
$( ".selector" ).droppable( "option", "accept", ".special" );

activeClassType: String

Default: false
如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式。
Code examples:

使用指定的activeClass 参数初始化一个droppable：

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

在初始化后设置或者获取activeClass参数：

1
2
3
4
5
6
 
// getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
 
 
// setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );

addClassesType: Boolean

Default: true
如果设置为false, 可以防止ui-droppable类在进行时添加. 这可能会使在初始化数百个元素执行.droppable()时使性能得到理想的优化.
Code examples:

使用指定的addClasses 参数初始化一个droppable：

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

在初始化后设置或者获取addClasses参数：

1
2
3
4
5
6
 
// getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
 
 
// setter
$( ".selector" ).droppable( "option", "addClasses", false );

disabledType: Boolean

Default: false
如果设置为 true将禁止拖放。
Code examples:

使用指定的disabled 参数初始化一个droppable：

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

在初始化后设置或者获取disabled参数：

1
2
3
4
5
6
 
// getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
 
 
// setter
$( ".selector" ).droppable( "option", "disabled", true );

greedyType: Boolean

Default: false
默认情况下，当一个元素被放到嵌套的放置（droppable）对象时，每个放置（droppable）对象都将接收到这个元素。然而，当设置这个选项为true时，任何父级的放置（droppable）对象不会接收元素。drop事件将依然会正常的泡沫，但event.target查看哪个放置（droppable）对象接受了拖动元素。
Code examples:

使用指定的greedy 参数初始化一个droppable：

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

在初始化后设置或者获取greedy参数：

1
2
3
4
5
6
 
// getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
 
 
// setter
$( ".selector" ).droppable( "option", "greedy", true );

hoverClassType: String

Default: false
如果设置了该参数,将在一个被允许的拖动元素悬停在放置（droppable）对象上时，向放置（droppable）对象添加一个指定的样式.
Code examples:

使用指定的hoverClass 参数初始化一个droppable：

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

在初始化后设置或者获取hoverClass参数：

1
2
3
4
5
6
 
// getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
 
 
// setter
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );

scopeType: String

Default: "default"
用来设置拖动（draggle）元素和放置（droppable）对象的集合, 除了droppable中的accept属性指定的元素外,和放置（droppable）对象相同集合的放置（droppable）对象也被允许添加到放置（droppable）对象中.
Code examples:

使用指定的scope 参数初始化一个droppable：

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

在初始化后设置或者获取scope参数：

1
2
3
4
5
6
 
// getter
var scope = $( ".selector" ).droppable( "option", "scope" );
 
 
// setter
$( ".selector" ).droppable( "option", "scope", "tasks" );

toleranceType: String

Default: "intersect"
指定使用那种模式来测试一个拖动(draggable)元素"经过"一个放置（droppable）对象。 允许使用的值:
  • "fit": 拖动(draggable)元素 完全重叠到放置（droppable）对象。
  • "intersect": 拖动(draggable)元素 和放置（droppable）对象至少重叠50%。
  • "pointer": 鼠标重叠到放置（droppable）对象上。
  • "touch": 拖动(draggable)元素 和放置（droppable）对象的任意重叠
Code examples:

使用指定的tolerance 参数初始化一个droppable：

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

在初始化后设置或者获取tolerance参数：

1
2
3
4
5
6
 
// getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
 
 
// setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );

Methods（方法）

destroy()

完全移除拖放功能. 这将使元素返回到之前的初始化状态.
  • 这个方法不接受任何参数
Code examples:

调用destroy 方法

1
 
$( ".selector" ).droppable( "destroy" );

disable()

禁用拖放。
  • 这个方法不接受任何参数
Code examples:

调用disable 方法

1
 
$( ".selector" ).droppable( "disable" );

enable()

启用拖放。
  • 这个方法不接受任何参数
Code examples:

调用enable 方法

1
 
$( ".selector" ).droppable( "enable" );

option( optionName )Returns: Object

通过指定的optionName获取当前关联的值。
  • optionName
    Type: String
    要获取值的选项名
Code examples:

调用这个方法：

1
 
var isDisabled = $( ".selector" ).droppable( "option", "disabled" );

option()Returns: PlainObject

获取一个对象，它包含表示当前droppable的选项hash的键/值对。
  • 这个方法不接受任何参数
Code examples:

调用这个方法：

1
 
var options = $( ".selector" ).droppable( "option" );

option( optionName, value )

通过指定的optionName，设置droppable的相关选项值。
  • optionName
    Type: String
    要设置值的选项名。
  • value
    Type: Object
    要设置选项的值。
Code examples:

调用这个方法：

1
 
$( ".selector" ).droppable( "option", "disabled", true );

option( options )

为droppable设置一个或多个选项。
  • options
    Type: Object
    设置的选项/值对的对象。
Code examples:

调用这个方法：

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

widget()Returns: jQuery

返回一个jQuery ，它包含了droppable元素。
  • 这个方法不接受任何参数
Code examples:

调用widget 方法

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

Events

activate( event, ui )Type: dropactivate

这个事件会在任何允许的draggable对象开始拖动时触发。它可以用来在你想让droppable对象在可以被填充的时"亮起来"的时候。
  • event
    Type: Event
  • ui
    Type: Object
    • draggable
      Type: jQuery
      一个jQuery对象代表的拖动元素。
    • helper
      Type: jQuery
      一个jQuery对象代表被拖动元素的助手。
    • position
      Type: Object
      当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
    • offset
      Type: Object
      当前可拖动助手的偏移位置对象，如{ top, left }。
Code examples:

使用指定的activate 回调初始化一个droppable：

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

绑定一个事件监听到dropactivate事件:

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

create( event, ui )Type: dropcreate

此事件会在droppable创建时触发。

注意：ui对象是空对象，包括是为了和其他事件的一致性。

Code examples:

使用指定的create 回调初始化一个droppable：

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

绑定一个事件监听到dropcreate事件：

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

deactivate( event, ui )Type: dropdeactivate

此事件会在任何允许的draggable对象停止拖动时触发.
  • event
    Type: Event
  • ui
    Type: Object
    • draggable
      Type: jQuery
      一个jQuery对象代表的拖动元素。
    • helper
      Type: jQuery
      一个jQuery对象代表被拖动元素的助手。
    • position
      Type: Object
      当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
    • offset
      Type: Object
      当前可拖动助手的偏移位置对象，如{ top, left }。
Code examples:

使用指定的deactivate 回调初始化一个droppable：

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

绑定一个事件监听到dropdeactivate事件：

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

drop( event, ui )Type: drop

这个事件会在一个允许的拖动（draggable）元素填充进这个放置（droppable）对象时触发.（基于tolerance选项）。（注释： 回调函数中, $(this) 表示被填充的droppable对象. ui.draggable 表示draggable对象.）
  • event
    Type: Event
  • ui
    Type: Object
    • draggable
      Type: jQuery
      一个jQuery对象代表的拖动元素。
    • helper
      Type: jQuery
      一个jQuery对象代表被拖动元素的助手。
    • position
      Type: Object
      当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
    • offset
      Type: Object
      当前可拖动助手的偏移位置对象，如{ top, left }。
Code examples:

使用指定的drop 回调初始化一个droppable：

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

绑定一个事件监听到drop事件：

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

out( event, ui )Type: dropout

此事件会在一个允许的拖动（draggable）元素离开这个放置（droppable）对象时触发（基于tolerance选项）。

注意：ui对象是空对象，包括是为了和其他事件的一致性。

Code examples:

使用指定的out 回调初始化一个droppable：

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

绑定一个事件监听到dropout事件：

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

over( event, ui )Type: dropover

此事件会在一个允许的拖动（draggable）元素经过这个放置（droppable）对象时触发（基于tolerance选项）。
  • event
    Type: Event
  • ui
    Type: Object
    • draggable
      Type: jQuery
      一个jQuery对象代表的拖动元素。
    • helper
      Type: jQuery
      一个jQuery对象代表被拖动元素的助手。
    • position
      Type: Object
      当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
    • offset
      Type: Object
      当前可拖动助手的偏移位置对象，如{ top, left }。
Code examples:

使用指定的over 回调初始化一个droppable：

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

绑定一个事件监听到dropover事件：

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

Example:

A pair of draggable and droppable elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>droppable demo</title>
 <link rel="stylesheet" href="//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="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//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>

Demo: