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 <style type=
"text/css" media=
"screen">
12 #thelist li { background: green; margin:
5px; padding:
30px; }
13 #thelist2 li { background: #ffb; margin:
2px; padding:
2px; }
17 <h1>script.aculo.us Drag and drop functional test file
</h1>
19 <h2>Draggables/Droppables
</h2>
21 <div id=
"revertbox1" class=
"box1" style=
"z-index:1000;width:150px;height:150px;background:#bbf;">
22 <span id=
"handle1">drag here
</span><br/>
23 <input type=
"checkbox" id=
"shouldrevert1"/> Revert?
26 <div id=
"revertbox2" class=
"box" style=
"z-index:1000;width:150px;height:150px;background:#bbf;">
27 <span id=
"handle2">drag here
</span><br/>
28 <input type=
"checkbox" id=
"shouldrevert2"/> Revert?
31 <div id=
"droptarget1" style=
"width:200px;height:200px;background-color:#eee;">accepts first box
</div>
32 <div id=
"droptarget2" style=
"width:200px;height:200px;background-color:#eee;">accepts second box
</div>
34 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
36 new MochiKit.DragAndDrop.Draggable('revertbox1',{handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
37 new MochiKit.DragAndDrop.Draggable('revertbox2',{handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
38 new MochiKit.DragAndDrop.Droppable('droptarget1',{accept:['box1','otherstuff'],ondrop:function(){alert('drop!')}});
39 new MochiKit.DragAndDrop.Droppable('droptarget2',{accept:['box'],ondrop:function(){alert('drop!')}});