Droppable Widget

优质

小牛编辑

130浏览

2023-12-01

Categories: Interactions

version added: 1.0

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

QuickNavExamples

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

Dependencies（依赖性）

UI Core
Widget Factory
Mouse Interaction

Options

acceptType: Selector or 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" );

activeClassType: 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" );

addClassesType: 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 );

disabledType: 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 );

greedyType: 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 );

hoverClassType: 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" );

scopeType: String

Default: "default"用来设置拖动（draggle）元素和放置（droppable）对象的集合, 除了droppable中的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" );

toleranceType: 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

通过指定的optionName获取当前关联的值。

optionNameType: String要获取值的选项名

Code examples:

调用这个方法：

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

option()Returns: PlainObject

获取一个对象，它包含表示当前droppable的选项hash的键/值对。

这个方法不接受任何参数

Code examples:

调用这个方法：

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

option( optionName, value )

通过指定的optionName，设置droppable的相关选项值。

optionNameType: String要设置值的选项名。
valueType: Object要设置选项的值。

Code examples:

调用这个方法：

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

option( options )

为droppable设置一个或多个选项。

optionsType: Object设置的选项/值对的对象。

Code examples:

调用这个方法：

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

widget()Returns: jQuery

返回一个jQuery ，它包含了droppable元素。

这个方法不接受任何参数

Code examples:

调用widget 方法

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

Events

activate( event, ui )Type: `dropactivate`

这个事件会在任何允许的draggable对象开始拖动时触发。它可以用来在你想让droppable对象在可以被填充的时"亮起来"的时候。

eventType: Event
uiType: Object
- draggableType: jQuery一个jQuery对象代表的拖动元素。
- helperType: jQuery一个jQuery对象代表被拖动元素的助手。
- positionType: Object当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
- offsetType: 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创建时触发。

eventType: Event
uiType: 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对象停止拖动时触发.

eventType: Event
uiType: Object
- draggableType: jQuery一个jQuery对象代表的拖动元素。
- helperType: jQuery一个jQuery对象代表被拖动元素的助手。
- positionType: Object当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
- offsetType: 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选项）。（愚人码头注释：回调函数中, $(this) 表示被填充的droppable对象. ui.draggable 表示draggable对象.）

eventType: Event
uiType: Object
- draggableType: jQuery一个jQuery对象代表的拖动元素。
- helperType: jQuery一个jQuery对象代表被拖动元素的助手。
- positionType: Object当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
- offsetType: 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选项）。

eventType: Event
uiType: 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选项）。

eventType: Event
uiType: Object
- draggableType: jQuery一个jQuery对象代表的拖动元素。
- helperType: jQuery一个jQuery对象代表被拖动元素的助手。
- positionType: Object当前可拖动助手的CSS的position（位置）对象，如{ top, left }。
- offsetType: 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>

Droppable Widget

version added: 1.0

QuickNavExamples

Options

Methods

Events

Dependencies（依赖性）

Options

acceptType: Selector or Function()

activeClassType: String

addClassesType: Boolean

disabledType: Boolean

greedyType: Boolean

hoverClassType: String

scopeType: String

toleranceType: String

Methods（方法）

destroy()

disable()

enable()

option( optionName )Returns: Object

option()Returns: PlainObject

option( optionName, value )

option( options )

widget()Returns: jQuery

Events

activate( event, ui )Type: dropactivate

create( event, ui )Type: dropcreate

deactivate( event, ui )Type: dropdeactivate

drop( event, ui )Type: drop

out( event, ui )Type: dropout

over( event, ui )Type: dropover

Example:

A pair of draggable and droppable elements.

activate( event, ui )Type: `dropactivate`

create( event, ui )Type: `dropcreate`

deactivate( event, ui )Type: `dropdeactivate`

drop( event, ui )Type: `drop`

out( event, ui )Type: `dropout`

over( event, ui )Type: `dropover`