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 ghosting 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> | |
14 | ul.testlist { | |
15 | list-style-type:none; | |
16 | margin:0; | |
17 | padding:0; | |
18 | } | |
19 | ul.testlist li { | |
20 | width:200px; | |
21 | font:12px Verdana; | |
22 | padding:4px; | |
23 | cursor:move; | |
24 | } | |
25 | ul.testlist li.over { | |
26 | background-color:#fcb; | |
27 | } | |
28 | ul.testlist li img { | |
29 | float:left; | |
30 | margin-right:8px; | |
31 | } | |
32 | div.dropmarker { | |
33 | height:6px; | |
34 | width:200px; | |
35 | background: url(dropmarker.png) left top; | |
36 | margin-top:-3px; | |
37 | margin-left:-5px; | |
38 | z-index:1000; | |
39 | overflow: hidden; | |
40 | } | |
41 | #testlist4 li { | |
42 | float:left; | |
43 | } | |
44 | </style> | |
45 | </head> | |
46 | <body> | |
47 | <h1>script.aculo.us Sortable ghosting functional test file</h1> | |
48 | ||
49 | <h2>Ghosting</h2> | |
50 | ||
51 | <ul id="testlist" class="testlist"> | |
52 | <li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li> | |
53 | <li id="item_2"><img src="icon.png" alt=""/> sit amet</li> | |
54 | <li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li> | |
55 | <li id="item_4"><img src="icon.png" alt=""/> elit</li> | |
56 | <li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li> | |
57 | <li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li> | |
58 | <li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li> | |
59 | <li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li> | |
60 | </ul> | |
61 | ||
62 | <p id="testlist_serialize">(waiting for onChange)</p> | |
63 | ||
64 | <script type="text/javascript" language="javascript" charset="utf-8"> | |
65 | // <![CDATA[ | |
66 | MochiKit.Sortable.Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over', | |
67 | onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))}, | |
68 | onChange:function(element){$('testlist_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)} | |
69 | }); | |
70 | // ]]> | |
71 | </script> | |
72 | ||
73 | <h2>No ghosting</h2> | |
74 | ||
75 | <ul id="testlist2" class="testlist"> | |
76 | <li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li> | |
77 | <li id="item_10"><img src="icon.png" alt=""/> sit amet</li> | |
78 | <li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li> | |
79 | <li id="item_12"><img src="icon.png" alt=""/> elit</li> | |
80 | <li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li> | |
81 | <li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li> | |
82 | <li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li> | |
83 | <li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li> | |
84 | </ul> | |
85 | ||
86 | <p id="testlist2_serialize">(waiting for onChange)</p> | |
87 | ||
88 | <script type="text/javascript" language="javascript" charset="utf-8"> | |
89 | // <![CDATA[ | |
90 | MochiKit.Sortable.Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over', | |
91 | onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))}, | |
92 | onChange:function(element){$('testlist2_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)} | |
93 | }); | |
94 | // ]]> | |
95 | </script> | |
96 | ||
97 | <h2>Ghosting (inside position:relative container)</h2> | |
98 | <div style="position:relative;left:100px;top:-5px;"> | |
99 | <ul id="testlist3" class="testlist"> | |
100 | <li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li> | |
101 | <li id="item_18"><img src="icon.png" alt=""/> sit amet</li> | |
102 | <li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li> | |
103 | <li id="item_20"><img src="icon.png" alt=""/> elit</li> | |
104 | <li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li> | |
105 | <li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li> | |
106 | <li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li> | |
107 | <li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li> | |
108 | </ul> | |
109 | </div> | |
110 | <p id="testlist3_serialize">(waiting for onChange)</p> | |
111 | ||
112 | <script type="text/javascript" language="javascript" charset="utf-8"> | |
113 | // <![CDATA[ | |
114 | MochiKit.Sortable.Sortable.create('testlist3',{ghosting:true,constraint:false, | |
115 | onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))}, | |
116 | onChange:function(element){$('testlist3_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)} | |
117 | }); | |
118 | // ]]> | |
119 | </script> | |
120 | ||
121 | ||
122 | <h2>Ghosting (inside position:relative container)</h2> | |
123 | <div style="position:relative;left:100px;top:-5px;"> | |
124 | <ul id="testlist4" class="testlist"> | |
125 | <li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li> | |
126 | <li id="item_418"><img src="icon.png" alt=""/> sit amet</li> | |
127 | <li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li> | |
128 | <li id="item_420"><img src="icon.png" alt=""/> elit</li> | |
129 | <li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li> | |
130 | <li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li> | |
131 | <li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li> | |
132 | <li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li> | |
133 | </ul> | |
134 | </div> | |
135 | <p id="testlist4_serialize">(waiting for onChange)</p> | |
136 | ||
137 | <script type="text/javascript" language="javascript" charset="utf-8"> | |
138 | // <![CDATA[ | |
139 | MochiKit.Sortable.Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false, | |
140 | onUpdate:function(sortable){alert(MochiKit.Sortable.Sortable.serialize(sortable))}, | |
141 | onChange:function(element){$('testlist4_serialize').innerHTML = MochiKit.Sortable.Sortable.serialize(element.parentNode)} | |
142 | }); | |
143 | // ]]> | |
144 | </script> | |
145 | ||
146 | ||
147 | <div id="debug"></div> | |
148 | ||
149 | </body> | |
150 | </html> |