jQuery UI Droppable
jQuery UI使您可以使用droppable()方法将任何DOM元素拖放到指定目标。
语法:
您可以以两种形式使用droppable()方法:
1. $(selector, context).droppable (options) 方法
2. $(selector, context).droppable ("action", params) 方法
$(selector, context).droppable (options)方法
droppable(options)方法指定您可以将HTML元素用作可以拖放其他元素的元素。在这里，option参数指定了所涉及元素的行为。
语法:
$(selector, context).droppable (options);
您可以使用JavaScript对象同时使用一个或多个选项。如果您使用多个选项，则必须使用逗号将它们分开。例如:
$(selector, context).droppable({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表:
| 选项 |
说明 |
| accept |
当您需要控制要放置哪些可拖动元素时，可以使用此选项。默认情况下，其值为*。 |
| activeclass |
此选项是一个字符串，表示一个或多个CSS类，当拖动已接受的元素(options.accept中指示的元素之一)时，该类将添加到droppable元素中。默认情况下，其值为false。 |
| addclasses |
此选项设置为false时，将防止将ui-droppable类添加到droppable元素中。默认情况下，其值为true。 |
| diasabled |
此选项设置为true时将禁用可放置性。默认情况下，其值为false。 |
| greedy |
当您需要控制将哪些可拖动元素放置在嵌套可放置对象上时，使用此选项。默认情况下，其值为false。如果将此选项设置为true，则任何父代可放置对象都不会接收该元素。 |
| hoverclass |
此选项是表示一个或多个css类的字符串，当一个接受的元素(options.accept中指示的元素)移入该元素时，该类将添加到droppable元素中。默认情况下，其值为false。 |
| scope |
此选项用于将可拖动元素的可拖放动作仅限制为具有相同options.scope(在draggable(选项)中定义)的项目。默认情况下，其值为"默认"。 |
| tolerence |
此选项是一个字符串，用于指定用于测试可拖动对象是否悬停在可放置对象上的模式。默认情况下，其值为"相交"。 |
jQuery UI Droppable()方法示例1
我们以一个示例来演示不带参数的jQuery UI Droppable()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-1 {
width: 100px; height: 100px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-1 {
width: 150px; height: 120px;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>I am SSSIT.org<br/> Drag me to lidihuo</p>
</div>
<div id="droppable-1" class="ui-widget-header">
<p>Welcome to lidihuo</p>
</div>
</body>
</html>
jQuery UI Droppable()方法示例2
b)如何使用addClass，disabled和tolerance:
该示例指定如何在jQuery UI的drop函数中使用这三个选项addClass，disable和tolerance。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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!<br/> Drop to touch the boundary.</p>
</div>
<div id="droppable-5" class="ui-widget-header">
<p>Tolerance Fit!<br/> Drop within the box.</p>
</div>
</body>
</html>
jQuery UI Droppable()方法示例3
c)如何选择要删除的元素:
以下该示例指定如何在jQuery UI的拖动功能中使用accept和scope选项:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.wrap{
display: table-row-group;
}
#sqltutorial,#htmltutorial, #javatutorial,#springtutorial {
width: 120px; height: 70px; padding: 0.5em; float: left;
margin: 0px 5px 10px 0;
}
#sql,#html,#java,#spring {
width: 140px; height: 100px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#sqltutorial").draggable();
$( "#htmltutorial").draggable();
$( "#sql").droppable({
accept: "#sqltutorial",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight")
.find( "p")
.html( "Dropped!");
}
});
$( "#html").droppable({
accept: "#htmltutorial",
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="sqltutorial" class="ui-widget-content">
<p>Students who want to learn <strong>SQL</strong></p>
</div>
<div id="htmltutorial" class="ui-widget-content">
<p>Students who want to learn <strong>HTML</strong></p>
</div>
<div id="sql" class="ui-widget-header">
<p>SQL</p>
</div>
<div id="html" class="ui-widget-header">
<p>HTML</p>
</div>
</div>
<hr/>
<div class="wrap" >
<div id="javatutorial" class="ui-widget-content">
<p>Students who want to learn <strong>Java</strong></p>
</div>
<div id="springtutorial" class="ui-widget-content">
<p>Students who want to learn <strong>Spring</strong></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>
jQuery UI Droppable()方法示例4
d)如何使用activeClass和hoverClass:
jQuery UI的activeClass和hoverClass选项用于管理外观。让我们以一个例子来演示这种效果:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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 : red;
background : pink;
}
.hover {
border-color : black;
background : lightgreen;
}
</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>Hover at me or Drop here</p>
</div>
</body>
</html>
$(selector, context).droppable("action", params)方法
droppable("action", params)方法用于对可放置元素执行操作，例如防止可放置功能。您必须在第一个参数中传递指定为字符串的操作。即"禁用"以防止掉线。
语法:
$(selector, context).droppable ("action", params);
以下是可以与该方法一起使用的操作的列表:
| 动作 |
说明 |
| accept |
当您需要控制哪些可拖动元素将被接受放置时，使用此选项。默认情况下，其值为*。 |
| activeclass |
此选项是一个字符串，表示当拖动一个已接受的元素(在options.accept中指示的元素之一)时要添加到droppable元素的一个或多个css类。默认情况下，其值为false。 |
| addclasses |
此选项将防止ui-droppable类在设置为false时被添加到droppable元素。默认情况下，其值为true。 |
| disabled |
当设置为true时，此选项禁用可放置对象。默认情况下，其值为false。 |
| greedy |
当您需要控制将哪些可拖动元素放置在嵌套可放置对象上时，使用此选项。默认情况下，其值为false。如果将此选项设置为true，则任何父代可放置对象都不会接收该元素。 |
| hoverclass |
此选项是表示一个或多个css类的字符串，当一个接受的元素(options.accept中指示的元素)移入该元素时，该类将添加到droppable元素中。默认情况下，其值为false。 |
| scope |
此选项用于将可拖动元素的可拖放动作仅限制为具有相同options.scope(在draggable(选项)中定义)的项目。默认情况下，其值为"默认"。 |
| tolerence |
此选项是一个字符串，用于指定用于测试可拖动对象是否悬停在可放置对象上的模式。默认情况下，其值为"相交"。 |
jQuery UI Droppable()方法示例5
让我们以一个示例来演示destroy()方法的使用:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>
jQueryUI中有一些事件方法会针对特定事件触发。以下是一些事件方法。
| 事件方法 |
说明 |
| activate(event，ui) |
当接受的可拖动元素开始拖动时触发此事件。如果您希望在放置时将可放置的对象"点亮"，这将很有用。 |
| create(event，ui) |
创建可放置元素时触发此事件。 ？哪里？事件是事件类型，" ui"是对象类型。 |
| 停用(event，ui) |
当可接受的可拖动对象停止拖动时将触发此事件。 " Where"事件是事件类型，而ui是对象类型。 |
| drop(event，ui) |
将元素放置在可放置对象上时触发此动作。这基于公差选项。 " where"事件属于事件类型，" ui"属于对象类型。 |
| out(event，ui) |
当将可接受的可拖动元素从可放置对象中拖出时，将触发此事件。这基于公差选项。 ？哪里？事件是事件类型，" ui"是对象类型。 |
| over(event，ui) |
当将可接受的可拖动元素拖动到可放置对象上时触发此事件。这基于公差选项。 " where"事件属于事件类型，" ui"属于对象类型。 |
jQuery UI Droppable()方法示例6
我们以一个示例来演示在放置功能期间发生" drop"，" over"和" out"事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://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>I am the target. </p>
</div>
</body>
</html>
