library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

droppable visual tests: added option accept tests

Browse Source
This commit is contained in:
Richard Worth 2009-02-07 19:02:08 +00:00
parent 8a12510ca1
commit 7da9735a9e
5 changed files with 124 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
tests/visual/droppable/droppable.css Normal file
View File

@ -0,0 +1,3 @@
#draggables * { width: 100px; height: 20px; display: block; margin-bottom: 1em; background: #abc; }
#droppable { width: 200px; }
#droppable * { margin: 0.8em; padding: 0.4em; }

30
tests/visual/droppable/droppable.html
View File

@ -1,8 +1,8 @@
<!doctype html>
<html lang="en">
<head>
<title>Simple Droppable</title>
<link rel="stylesheet" href="../all.css" type="text/css">
<title>Droppable Visual Test : Default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
@ -10,31 +10,13 @@
<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);
}
});
$("#droppable").droppable();
});
</script>
</head>
<body>
<ul class="plugins">
<li class="plugin">
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>
<div id="droppable">
<p> Droppable </p>
</div>
</body>
</html>

37
tests/visual/droppable/droppable_option_accept_default.html Normal file
View File

@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<title>Droppable Visual Test : Draggable option accept default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="droppable.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.1.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() {
$("#draggables *").draggable({
revert: true
});
$("#droppable").droppable({
drop: function(event, ui) {
$(this).append('<div>' + ui.draggable.text() + '</div>');
}
});
});
</script>
</head>
<body>
<div id="draggables">
<div>Draggable div</div>
<p>Draggable p</p>
<span>Draggable span</div>
</div>
<div id="droppable" class="ui-widget-content ui-corner-all">
<p class="ui-widget-header ui-corner-all"> Droppable </p>
</div>
</body>
</html>

40
tests/visual/droppable/droppable_option_accept_function.html Normal file
View File

@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<title>Droppable Visual Test : Draggable option accept function</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="droppable.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.1.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() {
$("#draggables *").draggable({
revert: true
});
$("#droppable").droppable({
accept: function(draggable) {
return (draggable.text() === 'Draggable p');
},
drop: function(event, ui) {
$(this).append('<div>' + ui.draggable.text() + '</div>');
}
});
});
</script>
</head>
<body>
<div id="draggables">
<div>Draggable div</div>
<p>Draggable p</p>
<span>Draggable span</div>
</div>
<div id="droppable" class="ui-widget-content ui-corner-all">
<p class="ui-widget-header ui-corner-all"> Droppable </p>
</div>
</body>
</html>

38
tests/visual/droppable/droppable_option_accept_selector.html Normal file
View File

@ -0,0 +1,38 @@
<!doctype html>
<html lang="en">
<head>
<title>Droppable Visual Test : Draggable option accept selector</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="droppable.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.1.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() {
$("#draggables *").draggable({
revert: true
});
$("#droppable").droppable({
accept: 'p',
drop: function(event, ui) {
$(this).append('<div>' + ui.draggable.text() + '</div>');
}
});
});
</script>
</head>
<body>
<div id="draggables">
<div>Draggable div</div>
<p>Draggable p</p>
<span>Draggable span</div>
</div>
<div id="droppable" class="ui-widget-content ui-corner-all">
<p class="ui-widget-header ui-corner-all"> Droppable </p>
</div>
</body>
</html>