85 lines
2.1 KiB
HTML
Executable File
85 lines
2.1 KiB
HTML
Executable File
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
<title>script.aculo.us functional test</title>
|
|
<script type="text/javascript" src="../../lib/prototype.js"></script>
|
|
<script type="text/javascript" src="../../src/effects.js"></script>
|
|
<script type="text/javascript" src="../../src/dragdrop.js"></script>
|
|
<script type="text/javascript">
|
|
//<![CDATA[
|
|
var myStartEffect = function(element) {
|
|
element._opacity = Element.getOpacity(element);
|
|
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
|
|
new Effect.Highlight(element, {});
|
|
}
|
|
//]]>
|
|
</script>
|
|
<style type="text/css">
|
|
/*<![CDATA[*/
|
|
h1 {font-size: 1.2em; text-align:center;}
|
|
li {
|
|
margin: 5px auto;
|
|
padding: 2px;
|
|
width: 200px;
|
|
text-align:center;
|
|
list-style-type:none;
|
|
border: 2px solid #779;
|
|
background-color: #dde
|
|
}
|
|
div {
|
|
margin: 5px auto;
|
|
padding: 2px;
|
|
width: 300px;
|
|
text-align:center;
|
|
border: 2px solid #797;
|
|
background-color: #ded
|
|
}
|
|
/*]]>*/
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>No delay sortable</h1>
|
|
|
|
<ul id="sort1">
|
|
<li id="s1_1">one</li>
|
|
|
|
<li id="s1_2">two</li>
|
|
|
|
<li id="s1_3">three</li>
|
|
</ul>
|
|
|
|
<h1>Delayed sortable (500 ms)</h1>
|
|
|
|
<ul id="sort2">
|
|
<li id="s2_1">one</li>
|
|
|
|
<li id="s2_2">two</li>
|
|
|
|
<li id="s2_3">three</li>
|
|
</ul>
|
|
|
|
<h1>No delay draggable</h1>
|
|
|
|
<div id="drag1">
|
|
Lorem ipsum
|
|
</div>
|
|
|
|
<h1>Delayed draggable (1000 ms)</h1>
|
|
|
|
<div id="drag2">
|
|
Lorem ipsum
|
|
</div>
|
|
|
|
<script type="text/javascript" charset="utf-8">
|
|
Sortable.create('sort1', {starteffect: myStartEffect});
|
|
Sortable.create('sort2', {starteffect:myStartEffect, delay:500});
|
|
new Draggable('drag1', {starteffect:myStartEffect});
|
|
new Draggable('drag2', {starteffect:myStartEffect, delay:1000});
|
|
</script>
|
|
</body>
|
|
</html>
|