1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
5 <title>script.aculo.us Drag and drop functional test file
</title>
6 <meta http-equiv=
"content-type" content=
"text/html; charset=utf-8" />
7 <script type=
"text/javascript" src=
"../../MochiKit/MochiKit.js"></script>
8 <script type=
"text/javascript" src=
"../../MochiKit/Position.js"></script>
9 <script type=
"text/javascript" src=
"../../MochiKit/Visual.js"></script>
10 <script type=
"text/javascript" src=
"../../MochiKit/DragAndDrop.js"></script>
11 <script type=
"text/javascript" src=
"../../MochiKit/Sortable.js"></script>
12 <style type=
"text/css" media=
"screen">
13 #thelist li { background: green; margin:
5px; padding:
30px; }
14 #thelist2 li { background: #ffb; margin:
2px; padding:
2px; }
15 #revertbox2 { position:absolute;top:
40px;left:
50px;z-index:
1000;width:
150px;height:
150px;background:#bbf; }
19 <h1>script.aculo.us Drag and drop functional test file
</h1>
21 <h2>Draggables/Droppables
</h2>
23 <div id=
"revertbox1" class=
"box1" style=
"z-index:1000;width:150px;height:150px;background:#bbf;">
24 <span class=
"handle1">drag here
</span><br/>
25 <input type=
"checkbox" id=
"shouldrevert1"/> Revert?
28 <div id=
"revertbox2" class=
"box">
29 <span id=
"handle2">drag here
</span><br/>
30 <input type=
"checkbox" id=
"shouldrevert2"/> Revert?
33 <div id=
"xxxx">testtest
</div>
35 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
37 new MochiKit.DragAndDrop.Draggable('revertbox1',{zindex:-
5,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
38 new MochiKit.DragAndDrop.Draggable('revertbox2',{handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
39 new MochiKit.DragAndDrop.Droppable('xxxx',{accept:['box1','box2'],onDrop:function(){alert('drop!')}});
46 <ul id=
"thelist" style=
"padding: 10px; position: absolute; top:20px; left:200px;z-index:1000;">
47 <li id=
"thelist_4">Hey there! I'm absolutely positioned
</li>
48 <li id=
"thelist_1">one
<br/><form id=
"form1"><input type=
"checkbox" onclick=
"this.checked = !this.checked" value=
"x" name=
"x" id=
"xyz"/><input type=
"text" id=
"xxx"></input></form></li>
49 <li id=
"thelist_2">two
<br/><form id=
"form2"><input type=
"text" id=
"xyx"></input></form></li>
50 <li id=
"thelist_3">three
<br/><form id=
"form3"><input type=
"text" id=
"xu3"></input></form></li>
53 <ul id=
"thelist2" style=
"padding: 2px; background:red;">
54 <li>Relatively here!
</li>
55 <li><input onclick=
"this.checked = !this.checked" name=
"x" id=
"x" type=
"checkbox"/>one
</li>
109 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
111 // Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
112 MochiKit.Sortable.Sortable.create('thelist');
113 MochiKit.Sortable.Sortable.create('thelist2');