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 sortable 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/Signal.js"></script> | |
11 | <script type="text/javascript" src="../../MochiKit/DragAndDrop.js"></script> | |
12 | <script type="text/javascript" src="../../MochiKit/Sortable.js"></script> | |
13 | <style type="text/css" media="screen"> | |
14 | ul.sortablelist { | |
15 | list-style-image:none; | |
16 | list-style-type:none; | |
17 | margin-top:5px; | |
18 | margin:0px; | |
19 | padding:0px; | |
20 | } | |
21 | ||
22 | ul.sortabledemo li { | |
23 | padding:0px; | |
24 | margin:0px; | |
25 | } | |
26 | ||
27 | span.handle { | |
28 | background-color: #E8A400; | |
29 | color:white; | |
30 | cursor: move; | |
31 | } | |
32 | ||
33 | li.green { | |
34 | background-color: #ECF3E1; | |
35 | border:1px solid #C5DEA1; | |
36 | cursor: move; | |
37 | } | |
38 | ||
39 | li.orange { | |
40 | border:1px solid #E8A400; | |
41 | background-color: #FFF4D8; | |
42 | } | |
43 | </style> | |
44 | </head> | |
45 | <body> | |
46 | <h1>script.aculo.us: Two floating sortables with containment and dropOnEmpty</h1> | |
47 | ||
48 | <div style="height:200px;"> | |
49 | <div style="float:left;"> | |
50 | <h3>This is the first list</h3> | |
51 | <ul class="sortabledemo" id="firstlist" style="height:150px;width:200px;"> | |
52 | <li class="green" id="firstlist_firstlist1">Item 1 from first list.</li> | |
53 | <li class="green" id="firstlist_firstlist2">Item 2 from first list.</li> | |
54 | <li class="green" id="firstlist_firstlist3">Item 3 from first list.</li> | |
55 | </ul> | |
56 | </div> | |
57 | <div style="float:left;"> | |
58 | <h3>And now the second list</h3> | |
59 | <ul class="sortabledemo" id="secondlist" style="height:150px;width:200px;"> | |
60 | <li class="orange" id="secondlist_secondlist1"> | |
61 | <span class="handle">DRAG HERE</span> Item 1 from second list. | |
62 | </li> | |
63 | <li class="orange" id="secondlist_secondlist2"> | |
64 | <span class="handle">DRAG HERE</span> Item 2 from second list. | |
65 | </li> | |
66 | <li class="orange" id="secondlist_secondlist3"> | |
67 | <span class="handle">DRAG HERE</span> Item 3 from second list. | |
68 | </li> | |
69 | </ul> | |
70 | </div> | |
71 | </div> | |
72 | ||
73 | <hr style="clear:both" /> | |
74 | ||
75 | <pre id="firstlist_debug"></pre> | |
76 | <pre id="secondlist_debug"></pre> | |
77 | ||
78 | <script type="text/javascript"> | |
79 | // <![CDATA[ | |
80 | MochiKit.Sortable.Sortable.create("firstlist", | |
81 | {dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false, | |
82 | onChange:function(){$('firstlist_debug').innerHTML = MochiKit.Sortable.Sortable.serialize('firstlist') }}); | |
83 | MochiKit.Sortable.Sortable.create("secondlist", | |
84 | {dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false, | |
85 | onChange:function(){$('secondlist_debug').innerHTML = MochiKit.Sortable.Sortable.serialize('secondlist') }}); | |
86 | // ]]> | |
87 | </script> | |
88 | ||
89 | </body> | |
90 | </html> |