jQueryUI提供 droppable()方法，使任何DOM元素都可以在指定目标(可拖动元素的目标)上删除.
droppable()方法可用于两种形式 :
$(selector, context).droppable (options) 方法
$(selector, context).droppable ("action", params) 方法
droppable(options)方法声明可以将HTML元素用作可以删除其他元素的元素. options 参数是一个对象，它指定所涉及元素的行为.
$(selector, context).droppable (options);
您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项，则使用逗号分隔它们，如下所示;
$(selector, context).droppable({option1: value1, option2: value2..... });下表列出了可与此方法一起使用的不同选项 :
| Sr.No. | 选项&安培;描述 |
|---|---|
| 1 | accept 当您需要控制哪些可拖动元素可以被删除时，使用此选项.默认情况下，其值为 * . 选项 - 接受 当您需要控制哪些可拖动元素时，使用此选项被接受放弃.默认情况下，其值为 * ，表示droppable接受每个项目. 这可以是 :
语法 $( ".selector" ).droppable(
{ accept: ".special" }
); |
| 2 | activeClass 此选项是一个String，表示在拖动一个接受的元素( options.accept 中指定的元素之一)时要添加到droppable元素的一个或多个CSS类.默认情况下，其值为 false . 选项 - activeClass 此选项是一个String，表示在拖动一个接受的元素( options.accept 中指定的元素之一)时要添加到droppable元素的一个或多个CSS类.默认情况下，其值为 false . 语法 $( ".selector" ).droppable(
{ activeClass: "ui-state-highlight" }
); |
| 3 | addClasses 当设置为 false 时，此选项将阻止将 ui-droppable 类添加到droppable元素.默认情况下，其值为 true . 选项 - addClasses 设置为 false 时，此选项将阻止将 ui-droppable 类添加到droppable元素中.默认情况下，其值为 true .在数百个元素上调用 .droppable() init时，可能需要将其作为性能优化. 语法 $( ".selector" ).droppable(
{ addClasses: false }
); |
| 4 | disabled 此选项设置为 true 时会禁用droppable.默认情况下，其值为 false . 选项 - 已停用 此选项设置为 true 时会禁用droppable，即禁用项目在指定元素上的移动以及删除这些元素.默认情况下，其值为 false . 语法 $( ".selector" ).droppable(
{ disabled: true }
); |
| 5 | greedy 当您需要控制哪些可拖动元素可以放置在嵌套的droppable上时，可以使用此选项.默认情况下，其值为 false .如果此选项设置为 true ，则任何父级droppables都不会收到该元素. 选项 - 贪婪 当您需要控制哪些可拖动元素可以放置在嵌套的droppable上时，可以使用此选项.默认情况下，其值为 false .如果此选项设置为 true ，则任何父级droppables都不会收到该元素. 语法 $( ".selector" ).droppable(
{ greedy: true }
); |
| 6 | hoverClass 此选项是 String ，表示当接受的元素( options.accept 中指示的元素)进入时，要添加到droppable元素的一个或多个CSS类它.默认情况下，其值为 false . 选项 - hoverClass 此选项是 String ，表示当接受的元素( options.accept 中指示的元素)移动时，要添加到droppable元素的一个或多个CSS类进去.默认情况下，其值为 false . 语法 $( ".selector" ).droppable(
{ hoverClass: "drop-hover" }
); |
| 7 | scope 此选项用于将可拖动元素的可放置操作仅限制为具有相同 options.scope (在draggable(options)中定义)的项目.默认情况下，其值为"默认". 选项 - 范围 此选项用于将可拖动元素的可放置操作仅限制为具有相同 options.scope (在draggable(options)中定义)的项目.默认情况下，其值为"默认". 语法 $( ".selector" ).droppable(
{ scope: "tasks" }
); |
| 8 | tolerance 此选项是一个 String ，它指定用于测试拖动器是否悬停在droppable上的模式.默认情况下，其值为"相交". 选项 - 容差 此选项是 String ，它指定可拖动元素应如何覆盖正在接受的放置的droppable元素.默认情况下，其值为"相交".可能的值为 :
语法 $( ".selector" ).droppable(
{ tolerance: "fit" }
); |
以下部分将向您展示一些丢弃功能的工作示例.
以下示例演示了一个可放置功能的简单示例，没有参数 droppable()方法.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-1 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-1 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-1" ).draggable();
$( "#droppable-1" ).droppable();
});
</script>
</head>
<body>
<div id = "draggable-1" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-1" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>让我们将上述代码保存在HTML文件 dropexample.htm 中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出.现在，您可以使用结果 :
以下示例演示了三个选项的使用（a）addClass（b）禁用和（c）JqueryUI的drop函数中的容差。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-2 {
width: 100px; height: 50px; padding: 0.5em;
margin: 0px 5px 10px 0;
}
#droppable-2,#droppable-3, #droppable-4,#droppable-5 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-2" ).draggable();
$( "#droppable-2" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable-3" ).droppable({
disabled : "true",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable-4" ).droppable({
tolerance: 'touch',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped with a touch!" );
}
});
$( "#droppable-5" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped only when fully fit on the me!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-2" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-2" class = "ui-widget-header">
<p>Drop here</p>
</div>
<div id = "droppable-3" class = "ui-widget-header">
<p>I'm disabled, you can't drop here!</p>
</div>
<div id = "droppable-4" class = "ui-widget-header">
<p>Tolerance Touch!</p>
</div>
<div id = "droppable-5" class = "ui-widget-header">
<p>Tolerance Fit!</p>
</div>
</body>
</html>让我们将上述代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在，你可以玩结果
现在将元素放在"Tolerance Touch"上！ 框（只需触摸此框的边缘）并查看目标元素的更改。 现在将元素放在"Tolerance Fit！"上 目标，可拖动元素必须与目标元素完全重叠，即"Tolerance Fit！" 目标。
以下示例演示了在JqueryUI的drag函数中使用选项accept和scope选项。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.wrap {
display: table-row-group;
}
#japanpeople,#indiapeople, #javatutorial,#springtutorial {
width: 120px; height: 70px; padding: 0.5em; float: left;
margin: 0px 5px 10px 0;
}
#japan,#india,#java,#spring {
width: 140px; height: 100px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#japanpeople" ).draggable();
$( "#indiapeople" ).draggable();
$( "#japan" ).droppable({
accept: "#japanpeople",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#india" ).droppable({
accept: "#indiapeople",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#javatutorial" ).draggable({scope : "java"});
$( "#springtutorial" ).draggable({scope : "spring"});
$( "#java" ).droppable({
scope: "java",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#spring" ).droppable({
scope: "spring",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div class = "wrap" >
<div id = "japanpeople" class = "ui-widget-content">
<p>People to be dropped to Japan</p>
</div>
<div id = "indiapeople" class = "ui-widget-content">
<p>People to be dropped to India</p>
</div>
<div id = "japan" class = "ui-widget-header">
<p>Japan</p>
</div>
<div id = "india" class = "ui-widget-header">
<p>India</p>
</div>
</div>
<hr/>
<div class = "wrap" >
<div id = "javatutorial" class = "ui-widget-content">
<p>People who want to learn Java</p>
</div>
<div id = "springtutorial" class = "ui-widget-content">
<p>People who want to learn Spring</p>
</div>
<div id = "java" class = "ui-widget-header">
<p>Java</p>
</div>
<div id = "spring" class = "ui-widget-header">
<p>Spring</p>
</div>
</div>
</body>
</html>让我们将上述代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。 现在你可以玩输出
在这里你可以看到你可以在"日本"目标和元素"来自印度的人"的目标印度上放弃元素"来自日本的人"。 类似"想要学习Java的人"的范围设置为"Java"，"想要学习Spring的人"设置为"Spring目标"。
以下示例演示了如何使用JqueryUI类的选项activeClass和hoverClass，这有助于我们管理外观。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type = "text/css">
#draggable-3 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 21px 5px 10px 0;
}
#droppable-6 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
.active {
border-color : blue;
background : grey;
}
.hover {
border-color : red;
background : green;
}
</style>
<script>
$(function() {
$( "#draggable-3" ).draggable();
$( "#droppable-6" ).droppable({
activeClass: "active",
hoverClass: "hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-3" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-6" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>让我们将上面的代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出
您可以注意到，在"拖动我的目标"元素的拖动或悬停（在目标上）时，更改目标元素"Drop here"的颜色。
droppable("action",params)方法可以对可放置元素执行操作，例如防止可放置的功能。 该动作在第一个参数中被指定为一个字符串（例如，"禁用"以防止丢弃）。 请查看下表中可以传递的操作。
$(selector, context).droppable("action", params);下表列出了可以与此方法一起使用的不同操作 :
| Sr.No. | Action & Description |
|---|---|
| 1 | destroy 此操作完全破坏元素的可放置功能。 元素返回到pre-init状态。 Action - destroy 此操作完全破坏元素的可放置功能。 元素返回到pre-init状态。 Syntax $( ".selector" ).droppable("destroy"); |
| 2 | disable 此操作将禁用可放置操作。 元素不再是可放置的元素。 此方法不接受任何参数。 Action - disable 此操作将禁用可放置操作。 元素不再是可放置的元素。 此方法不接受任何参数。 Syntax $( ".selector" ).droppable("disable"); |
| 3 | enable 此操作将重新激活可放置操作。 元素可以再次接收可放置的元素。 此方法不接受任何参数。 Action - enable 此操作将重新激活可放置操作。 元素可以再次接收可放置的元素。 此方法不接受任何参数。 Syntax $( ".selector" ).droppable("enable"); |
| 4 | option 此操作获取一个对象，该对象包含表示当前可放置选项哈希的键/值对。 此方法不接受任何参数。 Action - option 此操作获取一个对象，该对象包含表示当前可放置选项哈希的键/值对。 此方法不接受任何参数。 Syntax var options = $( ".selector" ).droppable( "option" ); |
| 5 | option( optionName ) 此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。 Action - option( optionName ) 此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。 Syntax var isDisabled = $( ".selector" ).droppable( "option", "disabled" ); |
| 6 | option( optionName, value ) 此操作设置与指定的optionName关联的droppable选项的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的droppable选项的值。 参数optionName是要设置的选项的名称，value是要为该选项设置的值。 Syntax $( ".selector" ).droppable( "option", "disabled", true ); |
| 7 | option( options ) 此操作为droppable设置一个或多个选项。 参数选项是要设置的选项 - 值对的映射。 Action - option( options ) 此操作为droppable设置一个或多个选项。 参数选项是要设置的选项 - 值对的映射。 Syntax $( ".selector" ).droppable( "option", { disabled: true } ); |
| 8 | widget 此操作返回包含droppable元素的jQuery对象。 此方法不接受任何参数。 Syntax var widget = $( ".selector" ).droppable( "widget" ); |
现在让我们看一个使用上表中的操作的示例。 以下示例演示了destroy()方法的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.draggable-4 {
width: 90px; height: 50px; padding: 0.5em; float: left;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color:#B9CD6D;
}
.droppable-7 {
width: 100px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
border: 1px solid black;
background-color:#A39480;
}
.droppable.active {
background-color: red;
}
</style>
<script>
$(function() {
$('.draggable-4').draggable({ revert: true });
$('.droppable-7').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "i'm destroyed!" );
}
});
});
</script>
</head>
<body>
<div class = "draggable-4"><p>drag 1</p></div>
<div class = "draggable-4"><p>drag 2</p></div>
<div class = "draggable-4"><p>drag 3</p></div>
<div style = "clear: both;padding:10px"></div>
<div class = "droppable-7">drop here</div>
<div class = "droppable-7">drop here</div>
<div class = "droppable-7">drop here</div>
</body>
</html>让我们将上面的代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出
如果在任何名为"drop here"的元素上删除"drag1"，您会注意到此元素被删除，此操作会完全破坏元素的可放置功能。 你不能再次在这个元素上删除"drag2"和"drag3"。
除了我们在前面部分中看到的droppable（options）方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下所列:
| Sr.No. | Event Method & Description |
|---|---|
| 1 | activate(event, ui) 当接受的可拖动元素开始拖动时，将触发此事件。 如果您想在可以放置的情况下使droppable"亮起"，这将非常有用。 Event - activate(event, ui) 当接受的可拖动元素开始拖动时，将触发此事件。 如果您想在可以放置的情况下使droppable"亮起"，这将非常有用。 其中event是Event类型，ui是Object类型。 ui的可能值是
Syntax $( ".selector" ).droppable({
activate: function( event, ui ) {}
}); |
| 2 | create(event, ui) 创建可放置元素时会触发此事件。 其中event是Event类型，ui是Object类型。 Event - create(event, ui) 创建可放置元素时会触发此事件。 其中event是Event类型，ui是Object类型。 Syntax $( ".selector" ).droppable({
create: function( event, ui ) {}
}); |
| 3 | deactivate(event, ui) 当已接受的可拖动停止拖动时，将触发此事件。 其中event是Event类型，ui是Object类型。 Event - deactivate(event, ui) 当已接受的可拖动停止拖动时，将触发此事件。 其中event是Event类型，ui是Object类型
Syntax $(".selector").droppable(
deactivate: function(event, ui) {}
); |
| 4 | drop(event, ui) 在droppable上放置元素时会触发此操作。 这基于容差选项。 其中event是Event类型，ui是Object类型。 Event - drop(event, ui) 在droppable上放置元素时会触发此操作。 这基于容差选项。 其中event是Event类型，ui是Object类型，可能的类型是:
Syntax $(".selector").droppable(
drop: function(event, ui) {}
); |
| 5 | out(event, ui) T当已接受的可拖动元素被拖出droppable时，将触发他的事件。 这基于容差选项。 其中event是Event类型，ui是Object类型。 Event - out(event, ui) 当已接受的可拖动元素被拖出droppable时，将触发他的事件。 这基于容差选项。 其中event是Event类型，ui是Object类型。 Syntax $(".selector").droppable(
out: function(event, ui) {}
); |
| 6 | over(event, ui) 将可接受的可拖动元素拖过droppable时会触发此事件。 这基于容差选项。 其中event是Event类型，ui是Object类型。 Event - over(event, ui) 将可接受的可拖动元素拖过droppable时会触发此事件。 这基于容差选项。 其中event是Event类型，ui是Object类型，可能的类型是 :
Syntax $(".selector").droppable(
over: function(event, ui) {}
); |
以下示例演示了删除功能期间的事件方法用法。 此示例演示了事件drop，over和out的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-5 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-8 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-5" ).draggable();
$("#droppable-8").droppable({
drop: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
over: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "moving in!" );
},
out: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "moving out!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-5" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-8" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>让我们将上面的代码保存在HTML文件dropexample.htm中，并在支持javascript的标准浏览器中打开它，你应该看到以下输出
在这里，您将注意到在拖动元素时droppable元素中的消息如何变化。
