Skip to content
Permalink
Browse files

Added droppable visual test

  • Loading branch information
rdworth committed Jun 9, 2008
1 parent 4a0df13 commit b2233945a6a06ae03f0de2a604ccfbd5c153c372
Showing with 62 additions and 1 deletion.
  1. +5 −1 tests/visual/all.css
  2. +18 −0 tests/visual/all.html
  3. +39 −0 tests/visual/droppable.html
@@ -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; }
@@ -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>
@@ -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>

0 comments on commit b223394

Please sign in to comment.
You can’t perform that action at this time.