github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-04-20 03:02:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added droppable visual test

Browse Source
This commit is contained in:
Richard Worth
2008-06-09 08:06:54 +00:00
parent 4a0df13665
commit b2233945a6
3 changed files with 62 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
tests/visual/all.css
View File

@@ -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; }

18
tests/visual/all.html
View File

@@ -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>

39
tests/visual/droppable.html Normal file
View File

@@ -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>