Added droppable visual test

jquery · Jun 9, 2008 · b223394 · b223394
1 parent 4a0df13
commit b223394
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 1 deletion.
diff --git a/tests/visual/all.css b/tests/visual/all.css
@@ -5,7 +5,7 @@ ul.plugins li { margin: 0 12px 12px 0;
 	list-style-type: none; width: 210px; height: 220px; float: left;
 	color: white; border: 1px solid gray; text-align: center; font-weight: bold; }
 
-#accordion, #draggable, #droppable,
+#accordion, #draggable,
 #resizable, #selectable, #sortable, #tabs {
 	margin: 10px;
 	width: 190px; height: 180px;
@@ -30,6 +30,10 @@ ul.plugins li { margin: 0 12px 12px 0;
 	background: black;
 }
 
+.draggable { margin: 10px; width: 32px; height: 30px; float: left; background: #FF9C08; }
+#droppable { margin: 10px; width: 190px; height: 130px; float: left; border: 1px solid #FF9C08; overflow: hidden; }
+#droppable .draggable { margin: 7px; }
+
 .ui-dialog { background-color: #FF9C08; }
 .ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height: 28px;	_height: 29px; }
 .ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }

diff --git a/tests/visual/all.html b/tests/visual/all.html
@@ -21,6 +21,13 @@
 		$("#datepicker").datepicker();
 		$("#dialog").click(function() { $("<div/>").dialog(); });
 		$("#draggable").draggable();
+		$(".draggable").draggable();
+		$("#droppable").droppable({
+			accept: '.draggable',
+			drop: function(ev, ui) {
+				ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);
+			}
+		});
 		$("#resizable").resizable();
 		$("#selectable").selectable();
 		$("#slider").slider();
@@ -47,6 +54,17 @@
 	Draggable
 	<div id="draggable"></div>
 </li>
+<li>
+	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>
 <li>
 	Resizable
 	<div id="resizable"></div>

diff --git a/tests/visual/droppable.html b/tests/visual/droppable.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple Droppable</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.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);
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<ul class="plugins">
+<li>
+	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>
+
+</body>
+</html>