Droppable（Droppable）
jQueryUI提供了droppable()方法，使任何DOM元素都可以在指定目标（可拖动元素的目标）上进行删除。
语法 (Syntax)
droppable()方法可以使用两种形式 -
$（selector，context）。droppable（options）方法
$(selector, context).droppable ("action", params)方法
$（selector，context）。droppable（options）方法
droppable (options)方法声明可以将HTML元素用作可以删除其他元素的元素。 options参数是一个对象，它指定所涉及元素的行为。
语法 (Syntax)
$(selector, context).droppable (options);
您可以使用Javascript对象一次提供一个或多个选项。 如果要提供多个选项，则您将使用逗号分隔它们，如下所示 -
$(selector, context).droppable({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同options -
| Sr.No. | 选项和说明 |
|---|---|
| 1 | accept 当您需要控制要删除哪些可拖动元素时，将使用此选项。 默认情况下，其值为* 。 Option - accept 当您需要控制要删除哪些可拖动元素时，将使用此选项。 默认情况下，其值为*表示droppable接受每个项目。 这可以是 -
Syntax |
| 2 | activeClass 此选项是一个String，表示在拖动一个接受的元素（ options.accept指示的元素之一）时要添加到droppable元素的一个或多个CSS类。 默认情况下，其值为false 。 Option - activeClass 此选项是一个String，表示在拖动一个接受的元素（ options.accept指示的元素之一）时要添加到droppable元素的一个或多个CSS类。 默认情况下，其值为false 。 Syntax |
| 3 | addClasses 设置为false时，此选项将阻止将ui-droppable类添加到droppable元素。 默认情况下，其值为true 。 Option - addClasses 设置为false时，此选项将阻止将ui-droppable类添加到droppable元素。 默认情况下，其值为true 。 在数百个元素上调用.droppable() init时，可能需要将其作为性能优化。 Syntax |
| 4 | disabled 设置为true时，此选项将禁用droppable。 默认情况下，其值为false 。 Option - disabled 设置为true时，此选项将禁用droppable，即禁用项目在指定元素上的移动以及删除这些元素。 默认情况下，其值为false 。 Syntax |
| 5 | greedy 当您需要控制哪些可拖动元素可以放置在嵌套的droppable上时，可以使用此选项。 默认情况下，其值为false 。 如果此选项设置为true ，则任何父级droppable都不会接收该元素。 Option - greedy 当您需要控制哪些可拖动元素可以放置在嵌套的droppable上时，可以使用此选项。 默认情况下，其值为false 。 如果此选项设置为true ，则任何父级droppable都不会接收该元素。 Syntax |
| 6 | hoverClass 此选项是String表示当接受的元素（ options.accept指示的元素）移入其中时，要添加到droppable元素的一个或多个CSS类。 默认情况下，其值为false 。 Option - hoverClass 此选项是String表示当接受的元素（ options.accept指示的元素）移入其中时，要添加到droppable元素的一个或多个CSS类。 默认情况下，其值为false 。 Syntax |
| 7 | scope 此选项用于将可拖动元素的可放置操作仅限制为具有相同options.scope （在draggable（options）中定义）的项目。 默认情况下，其值为"default" 。 Option - scope 此选项用于将可拖动元素的可放置操作仅限制为具有相同options.scope （在draggable（options）中定义）的项目。 默认情况下，其值为"default" 。 Syntax |
| 8 | tolerance 此选项是一个String ，用于指定用于测试拖动器是否悬停在droppable上的模式。 默认情况下，其值为"intersect" 。 Option - tolerance 此选项是一个String ，指定可拖动元素应如何覆盖正在接受的拖放的droppable元素。 默认情况下，其值为"intersect" 。 可能的值是 -
Syntax |
以下部分将向您展示一些丢弃功能的工作示例。
默认功能
以下示例演示了一个可放置功能的简单示例，它不向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的标准浏览器中打开它，您应该看到以下输出。
使用addClass，禁用和容差
以下示例演示了三个选项的使用(a) addClass (b) disabled和(c) tolerance JqueryUI的drop函数中的(c) tolerance 。
<!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的拖动函数中使用选项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”的颜色。
$ (selector, context).droppable（“action”，params）方法
droppable ("action", params)方法可以对可放置元素执行操作，例如防止可放置功能。 该操作在第一个参数中指定为字符串（例如，“禁用”以防止丢弃）。 请查看下表中可以传递的操作。
语法 (Syntax)
$(selector, context).droppable ("action", params);;
下表列出了此方法可以使用的不同actions -
| Sr.No. | 行动和描述 |
|---|---|
| 1 | destroy 此操作会完全破坏元素的可放置功能。 元素返回到pre-init状态。 Action - destroy 此操作会完全破坏元素的可放置功能。 元素返回到pre-init状态。 Syntax |
| 2 | disable 此操作将禁用可放置操作。 元素不再是可放置的元素。 此方法不接受任何参数。 Action - disable 此操作将禁用可放置操作。 元素不再是可放置的元素。 此方法不接受任何参数。 Syntax |
| 3 | enable 此操作会重新激活可放置操作。 元素可以再次接收可放置元素。 此方法不接受任何参数。 Action - enable 此操作会重新激活可放置操作。 元素可以再次接收可放置元素。 此方法不接受任何参数。 Syntax |
| 4 | option 此操作获取一个对象，该对象包含表示当前可放置选项哈希的键/值对。 此方法不接受任何参数。 Action - option 此操作获取一个对象，该对象包含表示当前可放置选项哈希的键/值对。 此方法不接受任何参数。 Syntax |
| 5 | option( optionName ) 此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。 Action - option( optionName ) 此操作使用指定的optionName获取当前关联的droppable元素的值。 这将String值作为参数。 Syntax |
| 6 | option( optionName, value ) 此操作设置与指定的optionName关联的droppable选项的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的droppable选项的值。 参数optionName是要设置的选项的名称， value是要为该选项设置的值。 Syntax |
| 7 | option( options ) 此操作为droppable设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。 Action - option( options ) 此操作为droppable设置一个或多个选项。 参数options是要设置的选项 - 值对的映射。 Syntax |
| 8 | widget 此操作返回包含droppable元素的jQuery对象。 此方法不接受任何参数。 此操作返回包含droppable元素的jQuery对象。 此方法不接受任何参数。 Syntax |
例子 (Example)
现在让我们看一个使用上表中的操作的示例。 以下示例演示了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. | 事件方法和描述 |
|---|---|
| 1 | activate(event, ui) 当接受的可拖动元素开始拖动时，将触发此事件。 如果您想在可以放置的情况下使droppable“亮起”，这将非常有用。 Event - activate(event, ui) 当接受的可拖动元素开始拖动时，将触发此事件。 如果您想在可以放置的情况下使droppable“亮起”，这将非常有用。 其中event是Event类型， ui是Object类型。 ui可能值是 -
Syntax |
| 2 | create(event, ui) 创建可放置元素时会触发此事件。 其中event是Event类型， ui是Object类型。 Event - create(event, ui) 创建可放置元素时会触发此事件。 其中event是Event类型， ui是Object类型。 Syntax |
| 3 | deactivate(event, ui) 当已接受的可拖动停止拖动时，将触发此事件。 其中event是Event类型， ui是Object类型。 Event - deactivate(event, ui) 当已接受的可拖动停止拖动时，将触发此事件。 其中event是Event类型， ui是Object类型，可能的类型是 -
Syntax |
| 4 | drop(event, ui) 在droppable上放置元素时会触发此操作。 这基于tolerance选项。 其中event是Event类型， ui是Object类型。 Event - drop(event, ui) 在droppable上放置元素时会触发此操作。 这基于tolerance选项。 其中event是Event类型， ui是Object类型，可能的类型是 -
Syntax |
| 5 | out(event, ui) 将可接受的可拖动元素拖出droppable时会触发此事件。 这基于tolerance选项。 其中event是Event类型， ui是Object类型。 Event - out(event, ui) 将可接受的可拖动元素拖出droppable时会触发Thi事件。 这基于tolerance选项。 其中event是Event类型， ui是Object类型。 Syntax |
| 6 | over(event, ui) 将可接受的可拖动元素拖过droppable时会触发此事件。 这基于tolerance选项。 其中event是Event类型， ui是Object类型。 Event - over(event, ui) 将可接受的可拖动元素拖过droppable时会触发此事件。 这基于tolerance选项。 where event的类型为Event ，而ui的类型为Object可能的类型是 -
Syntax |
例子 (Example)
以下示例演示了删除功能期间的事件方法用法。 此示例演示了事件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元素中的消息如何变化。