Skip to content

Commit b223394

Browse files
rdworthrdworth
committed
Added droppable visual test
1 parent 4a0df13 commit b223394

3 files changed

Lines changed: 62 additions & 1 deletion

File tree

‎tests/visual/all.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ ul.plugins li { margin: 0 12px 12px 0;
55
list-style-type: none; width: 210px; height: 220px; float: left;
66
color: white; border: 1px solid gray; text-align: center; font-weight: bold; }
77

8-
#accordion, #draggable, #droppable,
8+
#accordion, #draggable,
99
#resizable, #selectable, #sortable, #tabs {
1010
margin: 10px;
1111
width: 190px; height: 180px;
@@ -30,6 +30,10 @@ ul.plugins li { margin: 0 12px 12px 0;
3030
background: black;
3131
}
3232

33+
.draggable { margin: 10px; width: 32px; height: 30px; float: left; background: #FF9C08; }
34+
#droppable { margin: 10px; width: 190px; height: 130px; float: left; border: 1px solid #FF9C08; overflow: hidden; }
35+
#droppable .draggable { margin: 7px; }
36+
3337
.ui-dialog { background-color: #FF9C08; }
3438
.ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height: 28px; _height: 29px; }
3539
.ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }

‎tests/visual/all.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
$("#datepicker").datepicker();
2222
$("#dialog").click(function() { $("<div/>").dialog(); });
2323
$("#draggable").draggable();
24+
$(".draggable").draggable();
25+
$("#droppable").droppable({
26+
accept: '.draggable',
27+
drop: function(ev, ui) {
28+
ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);
29+
}
30+
});
2431
$("#resizable").resizable();
2532
$("#selectable").selectable();
2633
$("#slider").slider();
@@ -47,6 +54,17 @@
4754
Draggable
4855
<div id="draggable"></div>
4956
</li>
57+
<li>
58+
Droppable
59+
<div class="draggable">D</div>
60+
<div class="draggable">R</div>
61+
<div class="draggable">A</div>
62+
<div class="draggable">G</div>
63+
<div id="droppable">
64+
DROP
65+
<hr>
66+
</div>
67+
</li>
5068
<li>
5169
Resizable
5270
<div id="resizable"></div>

‎tests/visual/droppable.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Simple Droppable</title>
5+
<link rel="stylesheet" href="all.css" type="text/css" media="screen">
6+
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
7+
<script type="text/javascript" src="../../ui/ui.core.js"></script>
8+
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
9+
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
10+
<script type="text/javascript">
11+
$(function() {
12+
$(".draggable").draggable();
13+
$("#droppable").droppable({
14+
accept: '.draggable',
15+
drop: function(ev, ui) {
16+
ui.draggable.css({ position: 'relative', top: 0, left: 0 }).clone().appendTo(this);
17+
}
18+
});
19+
});
20+
</script>
21+
</head>
22+
<body>
23+
24+
<ul class="plugins">
25+
<li>
26+
Droppable
27+
<div class="draggable">D</div>
28+
<div class="draggable">R</div>
29+
<div class="draggable">A</div>
30+
<div class="draggable">G</div>
31+
<div id="droppable">
32+
DROP
33+
<hr>
34+
</div>
35+
</li>
36+
</ul>
37+
38+
</body>
39+
</html>

0 commit comments

Comments
 (0)