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的相关选项值。
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对象在可以被填充的时"亮起来"的时候。
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对象停止拖动时触发.
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对象.)
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
选项)。
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>