droppable visual tests: added option accept tests

jquery · Feb 7, 2009 · 7da9735a9e370eb88cbfaae66c20a6dd67f0bd8e · 7da9735
1 parent 8a12510
commit 7da9735a9e370eb88cbfaae66c20a6dd67f0bd8e
diff --git a/tests/visual/droppable/droppable.css b/tests/visual/droppable/droppable.css
@@ -0,0 +1,3 @@
+#draggables * { width: 100px; height: 20px; display: block; margin-bottom: 1em; background: #abc; }
+#droppable { width: 200px; }
+#droppable * { margin: 0.8em; padding: 0.4em; }
diff --git a/tests/visual/droppable/droppable.html b/tests/visual/droppable/droppable.html
@@ -1,40 +1,22 @@
 <!doctype html>
 <html lang="en">
 <head>
-	<title>Simple Droppable</title>
-	<link rel="stylesheet" href="../all.css" type="text/css">
+	<title>Droppable Visual Test : Default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
 	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
 	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
 	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
 	<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
 	<script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$(".draggable").draggable();
-		$("#droppable").droppable({
-			accept: '.draggable',
-			drop: function(ev, ui) {
-				ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);
-			}
-		});
+		$("#droppable").droppable();
 	});
 	</script>
 </head>
 <body>
-
-<ul class="plugins">
-<li class="plugin">
-	Droppable
-	<div class="draggable">D</div>
-	<div class="draggable">R</div>
-	<div class="draggable">A</div>
-	<div class="draggable">G</div>
-	<div id="droppable">
-		DROP
-		<hr>
-	</div>
-</li>
-</ul>
-
+<div id="droppable">
+	<p> Droppable </p>
+</div>
 </body>
 </html>
diff --git a/tests/visual/droppable/droppable_option_accept_default.html b/tests/visual/droppable/droppable_option_accept_default.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>Droppable Visual Test : Draggable option accept default</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="droppable.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#draggables *").draggable({
+			revert: true
+		});
+		$("#droppable").droppable({
+			drop: function(event, ui) {
+				$(this).append('<div>' + ui.draggable.text() + '</div>');
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggables">
+	<div>Draggable div</div>
+	<p>Draggable p</p>
+	<span>Draggable span</div>
+</div>
+
+<div id="droppable" class="ui-widget-content ui-corner-all">
+	<p class="ui-widget-header ui-corner-all"> Droppable </p>
+</div>
+</body>
+</html>
diff --git a/tests/visual/droppable/droppable_option_accept_function.html b/tests/visual/droppable/droppable_option_accept_function.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>Droppable Visual Test : Draggable option accept function</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="droppable.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#draggables *").draggable({
+			revert: true
+		});
+		$("#droppable").droppable({
+			accept: function(draggable) {
+				return (draggable.text() === 'Draggable p');
+			},
+			drop: function(event, ui) {
+				$(this).append('<div>' + ui.draggable.text() + '</div>');
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggables">
+	<div>Draggable div</div>
+	<p>Draggable p</p>
+	<span>Draggable span</div>
+</div>
+
+<div id="droppable" class="ui-widget-content ui-corner-all">
+	<p class="ui-widget-header ui-corner-all"> Droppable </p>
+</div>
+</body>
+</html>
diff --git a/tests/visual/droppable/droppable_option_accept_selector.html b/tests/visual/droppable/droppable_option_accept_selector.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>Droppable Visual Test : Draggable option accept selector</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="droppable.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+	<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#draggables *").draggable({
+			revert: true
+		});
+		$("#droppable").droppable({
+			accept: 'p',
+			drop: function(event, ui) {
+				$(this).append('<div>' + ui.draggable.text() + '</div>');
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="draggables">
+	<div>Draggable div</div>
+	<p>Draggable p</p>
+	<span>Draggable span</div>
+</div>
+
+<div id="droppable" class="ui-widget-content ui-corner-all">
+	<p class="ui-widget-header ui-corner-all"> Droppable </p>
+</div>
+</body>
+</html>