| 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> |