JqueryUI - Droppable 放置方法
jQueryUI 提供了 droppable() 方法来使任何 DOM 元素在指定的目标（可拖动元素的目标）处可放置。
语法
droppable() 方法有两种使用方式 −
$ (selector, context).droppable (options) 方法
droppable (options) 方法声明一个 HTML 元素可以用作您可以在其中放置其他元素的元素。 options 参数是一个指定所涉及元素行为的对象。
语法
$(selector, context).droppable (options);
您可以使用 Javascript 对象一次提供一个或多个选项。 如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 −
$(selector, context).droppable({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 −
| 序号 | 选项 & 说明 |
|---|---|
| 1 | accept
当您需要控制哪些可拖动元素可以被放置时使用此选项。 默认情况下，它的值为 *。
|
| 2 | activeClass
此选项是一个字符串，表示一个或多个 CSS 类，当一个接受的元素（options.accept 中指示的元素之一）被拖动时，将被添加到可放置元素中。 默认情况下，它的值为 false。 |
| 3 | addClasses
此选项设置为 false 时将阻止将 ui-droppable 类添加到可放置元素中。 默认情况下，它的值为 true。 |
| 4 | disabled
当设置为 true 时，此选项将禁用 droppable。 默认情况下，它的值为 false。 |
| 5 | greedy
当您需要控制要接受哪些可拖动元素放置在嵌套的可放置对象上时，使用此选项。 默认情况下，它的值为 false。 如果此选项设置为 true，则任何父级 droppables 都不会接收该元素。 |
| 6 | hoverClass
此选项是 String，代表一个或多个 CSS 类，当接受的元素（options.accept 中指示的元素）移入时，将添加到 droppable 的元素中。 默认情况下，它的值为 false。 |
| 7 | scope
此选项用于将可拖动元素的可放置操作限制为仅具有相同 options.scope 的项目（在 draggable (options) 中定义）。 默认情况下，它的值为 "default"。 |
| 8 | tolerance
此选项是一个 String，它指定用于测试可拖动对象是否悬停在可放置对象上的模式。 默认情况下，它的值为 "intersect"。 |
以下部分将向您展示一些放置功能的工作示例。
默认功能
以下示例演示了可放置功能的一个简单示例，不向 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、disabled和tolerance的使用
下面的例子演示了三个选项(a)addClass(b)disabled和(c)tolerance在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的拖拽功能中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 的标准浏览器中打开它，您应该会看到以下输出。 现在你可以玩输出了 −
管理外观
以下示例演示了 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 的标准浏览器中打开它，您应该会看到以下输出 −
您会注意到，在"Drag me to my target"元素的拖动或悬停（在目标上方）时，会更改目标元素"Drop here"的颜色。
$ (selector, context).droppable ("action", params) 方法
droppable ("action", params) 方法可以对可放置元素执行操作，例如防止可放置功能。 该操作在第一个参数中指定为字符串（例如，"disable"以防止丢弃）。 在下表中查看可以传递的操作。
语法
$(selector, context).droppable ("action", params);;
下表列出了可与此方法一起使用的不同actions操作 −
| 序号 | 操作 & 说明 |
|---|---|
| 1 | destroy
此操作完全破坏了元素的可放置功能。 元素返回到它们的预初始化状态。 |
| 2 | disable
此操作禁用可删除操作。 这些元素不再是可放置的元素。 此方法不接受任何参数。 |
| 3 | enable
此操作重新激活可放置操作。 这些元素可以再次接收一个可放置的元素。 此方法不接受任何参数。 |
| 4 | option
此操作获取一个对象，其中包含表示当前可删除选项哈希的键/值对。 此方法不接受任何参数。 |
| 5 | option( optionName )
此操作获取当前关联的具有指定 optionName 的可放置元素的值。 这需要一个字符串值作为参数。 |
| 6 | option( optionName, value )
此操作设置与指定的 optionName 关联的可放置选项的值。 |
| 7 | option( options )
此操作为可放置对象设置一个或多个选项。 参数 options 是要设置的选项值对的映射。 |
| 8 | widget
此操作返回一个包含可放置元素的 jQuery 对象。 此方法不接受任何参数。 |
示例
现在让我们看一个使用上表中的操作的示例。 下面的例子演示了 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 的标准浏览器中打开它，您应该会看到以下输出 −
如果您将"drag1"拖放到任何名为"drop here"的元素上，您会注意到该元素被拖放并且此操作完全破坏了元素的可拖放功能。 您不能再次在此元素上放置"drag2"和"drag3"。
可放置元素的事件管理
除了我们在前面部分中看到的 droppable (options) 方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −
| 序号 | 事件方法 & 说明 |
|---|---|
| 1 | activate(event, ui)
当接受的可拖动元素开始拖动时触发此事件。 如果您想让可放置的可放置物在可以放置时"light up"点亮它，这将很有用。 |
| 2 | create(event, ui)
创建可放置元素时会触发此事件。 其中event是Event类型，ui是Object类型。 |
| 3 | deactivate(event, ui)
当接受的可拖动对象停止拖动时触发此事件。 其中event是Event类型，ui是Object类型。 |
| 4 | drop(event, ui)
当一个元素被放置在 droppable 上时，这个动作被触发。 这是基于 tolerance 选项。 其中event是Event类型，ui是Object类型。 |
| 5 | out(event, ui)
当接受的可拖动元素被拖出可放置元素时，会触发此事件。 这是基于 tolerance 选项。 其中event是Event类型，ui是Object类型。 |
| 6 | over(event, ui)
当接受的可拖动元素被拖动到可放置元素上时，会触发此事件。 这是基于 tolerance 选项。 其中event是Event类型，ui是Object类型。 |
示例
以下示例演示了放置功能期间的事件方法用法。 此示例演示了事件 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 的标准浏览器中打开它，您应该会看到以下输出 −
在这里，您会注意到拖动元素时可放置元素中的消息是如何变化的。
