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 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>
26 background-color:#fcb;
35 background: url(dropmarker.png) left top;
47 <h1>script.aculo.us Sortable ghosting functional test file
</h1>
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>
62 <p id=
"testlist_serialize">(waiting for onChange)
</p>
64 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
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)}
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>
86 <p id=
"testlist2_serialize">(waiting for onChange)
</p>
88 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
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)}
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>
110 <p id=
"testlist3_serialize">(waiting for onChange)
</p>
112 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
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)}
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>
135 <p id=
"testlist4_serialize">(waiting for onChange)
</p>
137 <script type=
"text/javascript" language=
"javascript" charset=
"utf-8">
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)}
147 <div id=
"debug"></div>