diff options
| author | Richard Worth <rdworth@gmail.com> | 2008-06-09 08:06:54 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2008-06-09 08:06:54 +0000 |
| commit | b2233945a6a06ae03f0de2a604ccfbd5c153c372 (patch) | |
| tree | 0a5d8bf421c2e247139c919b69d4c2684b51915d /tests | |
| parent | 4a0df13665fd34ee1b3a7be660cb9024664ad6b7 (diff) | |
| download | jquery-ui-b2233945a6a06ae03f0de2a604ccfbd5c153c372.tar.gz jquery-ui-b2233945a6a06ae03f0de2a604ccfbd5c153c372.zip | |
Added droppable visual test
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/visual/all.css | 6 | ||||
| -rw-r--r-- | tests/visual/all.html | 18 | ||||
| -rw-r--r-- | tests/visual/droppable.html | 39 |
3 files changed, 62 insertions, 1 deletions
diff --git a/tests/visual/all.css b/tests/visual/all.css index 17fc5985b..4fb7bf5c4 100644 --- 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 index 2340b1a01..e0b2fbafd 100644 --- 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();
@@ -48,6 +55,17 @@ <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>
</li>
diff --git a/tests/visual/droppable.html b/tests/visual/droppable.html new file mode 100644 index 000000000..4bc5164eb --- /dev/null +++ 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>
|