mochikit_v14/examples/dnd_sortable/sortable2_test.html

   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>