Droppable Widget

Categories: Interactions

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

$( ".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创建时触发。

注意: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选项)。

注意: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>