描述:为可拖拽小部件创建目标。
版本新增:1.0
依赖:
注释:jQuery UI 可放置(Droppable)插件让被选元素可放置(意味着它们在拖拽后接受被放置)。您可以逐个指定哪一个 draggable 会接受。
选项 | 方法 | 事件 |
---|---|---|
acceptactiveClassaddClassesdisabledgreedyhoverClassscopetolerance | destroydisableenableoptionwidget | activatecreatedeactivatedropoutover |
类型:Selector 或 Function()
描述:控制哪个可拖拽(draggable)元素可被 droppable 接受。
支持多个类型:
true
。代码实例:
初始化带有指定 accept
选项的 droppable:
$( ".selector" ).droppable({ accept: ".special" });
在初始化后,获取或设置 accept
选项:
// getter
var accept = $( ".selector" ).droppable( "option", "accept" );
// setter
$( ".selector" ).droppable( "option", "accept", ".special" );
默认值:"*"
类型:String
描述:如果指定了该选项,当一个可接受的 draggable 被拖拽时,class 将被添加到 droppable。
代码实例:
初始化带有指定 activeClass
选项的 droppable:
$( ".selector" ).droppable({ activeClass: "ui-state-highlight" });
在初始化后,获取或设置 activeClass
选项:
// getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
// setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );
默认值:false
类型:Boolean
描述:如果设置为 false
,将防止 ui-droppable
class 被添加。这在数百个元素上调用 .droppable()
时有助于性能优化。
代码实例:
初始化带有指定 addClasses
选项的 droppable:
$( ".selector" ).droppable({ addClasses: false });
在初始化后,获取或设置 addClasses
选项:
// getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
// setter
$( ".selector" ).droppable( "option", "addClasses", false );
默认值:true
类型:Boolean
描述:如果设置为 true
,则禁用该 droppable。
代码实例:
初始化带有指定 disabled
选项的 droppable:
$( ".selector" ).droppable({ disabled: true });
在初始化后,获取或设置 disabled
选项:
// getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
// setter
$( ".selector" ).droppable( "option", "disabled", true );
默认值:false
类型:Boolean
描述:默认情况下,当一个元素被放置在嵌套是 droppable 上时,每个 droppable 将接收该元素。然而,通过设置该选项为 true
,任何父元素的 droppable 将无法接收该元素。 drop
事件仍将照常,但会检查 event.target
以便查看哪个 droppable 接收 draggable 元素。
代码实例:
初始化带有指定 greedy
选项的 droppable:
$( ".selector" ).droppable({ greedy: true });
在初始化后,获取或设置 greedy
选项:
// getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
// setter
$( ".selector" ).droppable( "option", "greedy", true );
默认值:false
类型:String
描述:如果指定了该选项,当一个可接受 draggable 被覆盖在 droppable 上时,class 将被添加到 droppable。
代码实例:
初始化带有指定 hoverClass
选项的 droppable:
$( ".selector" ).droppable({ hoverClass: "drop-hover" });
在初始化后,获取或设置 hoverClass
选项:
// getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
// setter
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );
默认值:false
类型:String
描述:用于组合配套 draggable 和 droppable 项,除了 droppable 的 accept
选项之外。一个与 droppable 带有相同的 scope
值的 draggable 会被该 droppable 接受。
代码实例:
初始化带有指定 scope
选项的 droppable:
$( ".selector" ).droppable({ scope: "tasks" });
在初始化后,获取或设置 scope
选项:
// getter
var scope = $( ".selector" ).droppable( "option", "scope" );
// setter
$( ".selector" ).droppable( "option", "scope", "tasks" );
默认值:"default"
类型:String
描述:指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值:
"fit"
:draggable 完全重叠在 droppable 上。"intersect"
:draggable 重叠在 droppable 上,两个方向上至少 50%。"pointer"
:鼠标指针重叠在 droppable 上。"touch"
:draggable 重叠在 droppable 上,任何数量皆可。代码实例:
初始化带有指定 tolerance
选项的 droppable:
$( ".selector" ).droppable({ tolerance: "fit" });
在初始化后,获取或设置 tolerance
选项:
// getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
// setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );
默认值:"intersect"
类型:jQuery (plugin only)
描述:完全移除 droppable 功能。这会把元素返回到它的预初始化状态。
代码实例:
调用 destroy 方法:
$( ".selector" ).droppable( "destroy" );
类型:jQuery (plugin only)
描述:禁用 droppable。
代码实例:
调用 disable 方法:
$( ".selector" ).droppable( "disable" );
类型:jQuery (plugin only)
描述:启用 droppable。
代码实例:
调用 enable 方法:
$( ".selector" ).droppable( "enable" );
类型:Object
描述:获取当前与指定的 optionName
关联的值。
代码实例:
调用该方法:
var isDisabled = $( ".selector" ).droppable( "option", "disabled" );
类型:PlainObject
描述:获取一个包含键/值对的对象,键/值对表示当前 droppable 选项哈希。
代码实例:
调用该方法:
var options = $( ".selector" ).droppable( "option" );
类型:jQuery (plugin only)
描述:设置与指定的 optionName
关联的 droppable 选项的值。
代码实例:
调用该方法:
$( ".selector" ).droppable( "option", "disabled", true );
类型:jQuery (plugin only)
描述:为 droppable 设置一个或多个选项。
代码实例:
调用该方法:
$( ".selector" ).droppable( "option", { disabled: true } );
类型:jQuery
描述:返回一个包含 droppable 元素的 jQuery
对象。
代码实例:
调用 widget 方法:
var widget = $( ".selector" ).droppable( "widget" );
类型:dropactivate
描述:当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮",该选项就可以派上用场。
{ top, left }
对象。{ top, left }
对象。代码实例:
初始化带有指定 activate 回调的 droppable:
$( ".selector" ).droppable({
activate: function( event, ui ) {}
});
绑定一个事件监听器到 dropactivate 事件:
$( ".selector" ).on( "dropactivate", function( event, ui ) {} );
类型:dropcreate
描述:当 droppable 被创建时触发。
注意:ui
对象是空的,这里包含它是为了与其他事件保持一致性。
代码实例:
初始化带有指定 create 回调的 droppable:
$( ".selector" ).droppable({
create: function( event, ui ) {}
});
绑定一个事件监听器到 dropcreate 事件:
$( ".selector" ).on( "dropcreate", function( event, ui ) {} );
类型:dropdeactivate
描述:当一个可接受的 draggable 停止拖拽时触发。
{ top, left }
对象。{ top, left }
对象。代码实例:
初始化带有指定 deactivate 回调的 droppable:
$( ".selector" ).droppable({
deactivate: function( event, ui ) {}
});
绑定一个事件监听器到 dropdeactivate 事件:
$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} );
类型:drop
描述:当一个可接受的 draggable 被放置在 droppable(基于 [tolerance](#option-tolerance)
选项)上时触发。
{ top, left }
对象。{ top, left }
对象。代码实例:
初始化带有指定 drop 回调的 droppable:
$( ".selector" ).droppable({
drop: function( event, ui ) {}
});
绑定一个事件监听器到 drop 事件:
$( ".selector" ).on( "drop", function( event, ui ) {} );
类型:dropout
描述:当 droppable 被拖拽出 droppable(基于 [tolerance](#option-tolerance)
选项)时触发。
注意:ui
对象是空的,这里包含它是为了与其他事件保持一致性。
代码实例:
初始化带有指定 out 回调的 droppable:
$( ".selector" ).droppable({
out: function( event, ui ) {}
});
绑定一个事件监听器到 dropout 事件:
$( ".selector" ).on( "dropout", function( event, ui ) {} );
类型:dropover
描述:当一个可接受的 draggable 被拖拽在 droppable(基于 [tolerance](#option-tolerance)
选项)上时触发。
{ top, left }
对象。{ top, left }
对象。代码实例:
初始化带有指定 over 回调的 droppable:
$( ".selector" ).droppable({
over: function( event, ui ) {}
});
绑定一个事件监听器到 dropover 事件:
$( ".selector" ).on( "dropover", function( event, ui ) {} );
一对 draggable 和 droppable 元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>可放置小部件(Droppable Widget)演示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/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.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="droppable">请放置到这里!</div>
<div id="draggable">请拖拽我!</div>
<script>
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function() {
alert( "dropped" );
}
});
</script>
</body>
</html>