Skip to content
Permalink
Browse files

droppable visual tests: added option accept tests

  • Loading branch information
rdworth committed Feb 7, 2009
1 parent 8a12510 commit 7da9735a9e370eb88cbfaae66c20a6dd67f0bd8e
@@ -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; }
@@ -1,40 +1,22 @@
<!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>
<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);
}
});
$("#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>
@@ -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>
@@ -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>
@@ -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>

0 comments on commit 7da9735

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