root/public/javascripts/scriptaculous/test/functional/sortable2_test.html

Revision 1, 5.5 kB (checked in by falcon, 17 years ago)

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