Commit | Line | Data |
---|---|---|
6a1aa64f DV |
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"> | |
4 | <head> | |
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 | div.box { background: green; width:100px; height:100px } | |
13 | </style> | |
14 | </head> | |
15 | <body> | |
16 | <h1>script.aculo.us Drag and drop functional test file</h1> | |
17 | ||
18 | <h2>Draggables/Droppables</h2> | |
19 | ||
20 | <div id="box-normal" class="box"> | |
21 | Normal box | |
22 | </div> | |
23 | ||
24 | <div id="box-grid-numeric" class="box"> | |
25 | snap: 25 | |
26 | </div> | |
27 | ||
28 | <div id="box-grid-array" class="box"> | |
29 | snap: [5,25] | |
30 | </div> | |
31 | ||
32 | <div id="box-grid-procedural" class="box"> | |
33 | snap: procedural (e.g. constrain to box) | |
34 | </div> | |
35 | ||
36 | <script type="text/javascript" language="javascript" charset="utf-8"> | |
37 | // <![CDATA[ | |
38 | new MochiKit.DragAndDrop.Draggable('box-normal',{snap:false,revert:true}); | |
39 | new MochiKit.DragAndDrop.Draggable('box-grid-numeric',{snap:25,revert:true}); | |
40 | new MochiKit.DragAndDrop.Draggable('box-grid-array',{snap:[5,25],revert:true}); | |
41 | new MochiKit.DragAndDrop.Draggable('box-grid-procedural',{ | |
42 | snap: function(x,y) { | |
43 | return[ | |
44 | x<100 ? (x > 0 ? x : 0 ) : 100, | |
45 | y<50 ? (y > 0 ? y : 0) : 50]; | |
46 | }, | |
47 | revert:true | |
48 | }); | |
49 | // ]]> | |
50 | </script> | |
51 | ||
52 | ||
53 | </body> | |
54 | </html> |