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

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

Version one -> initial work from the laptop.
Line 
1<html xmlns="http://www.w3.org/1999/xhtml">
2<head runat="server">
3  <title>script.aculo.us Drag and drop functional test file</title>
4  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5  <script src="../../lib/prototype.js" type="text/javascript"></script>
6  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
7  <style type="text/css" media="screen">
8    #thelist li { background: green; margin:5px; padding: 30px; }
9    #thelist2 li { background: #ffb; margin:2px; padding: 2px; }
10  </style>
11</head>
12<body>
13<h1>script.aculo.us Drag and drop functional test file</h1>
14
15<p>Scroll window down to test autoscrolling inside scrollable elements when window is scrolled</p>
16
17<h2>Draggables/Droppables</h2>
18
19<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
20
21<ul id="thelist2" style="padding: 2px; background:red;">
22<li>Relatively here!</li>
23<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
24<li>one</li>
25<li>one</li>
26<li>one</li>
27<li>one</li>
28<li>one</li>
29<li>one</li>
30<li>one</li>
31<li>one</li>
32<li>one</li>
33<li>one</li>
34<li>one</li>
35<li>one</li>
36<li>one</li>
37<li>one</li>
38<li>one</li>
39<li>one</li>
40<li>one</li>
41<li>one</li>
42<li>one</li>
43<li>one</li>
44<li>one</li>
45<li>one</li>
46<li>one</li>
47<li>one</li>
48<li>one</li>
49<li>one</li>
50<li>one</li>
51<li>one</li>
52<li>one</li>
53<li>one</li>
54<li>one</li>
55<li>one</li>
56<li>one</li>
57<li>one</li>
58<li>one</li>
59<li>one</li>
60<li>one</li>
61<li>one</li>
62<li>one</li>
63<li>one</li>
64<li>one</li>
65<li>one</li>
66<li>one</li>
67<li>one</li>
68<li>one</li>
69<li>one</li>
70<li>one</li>
71<li>one</li>
72<li>one</li>
73</ul>
74
75</div>
76<h1> Some space in between</h1>
77<div style="width:400px;height:400px;overflow:scroll" id="scroll-container-mod">
78
79<ul id="thelist2-mod" style="padding: 2px; background:red;">
80<li>Relatively here!</li>
81<li><input onclick="this.checked = !this.checked" name="y" id="y" type="checkbox"/>one</li>
82<li>one</li>
83<li>one</li>
84<li>one</li>
85<li>one</li>
86<li>one</li>
87<li>one</li>
88<li>one</li>
89<li>one</li>
90<li>one</li>
91<li>one</li>
92<li>one</li>
93<li>one</li>
94<li>one</li>
95<li>one</li>
96<li>one</li>
97<li>one</li>
98<li>one</li>
99<li>one</li>
100<li>one</li>
101<li>one</li>
102<li>one</li>
103<li>one</li>
104<li>one</li>
105<li>one</li>
106<li>one</li>
107<li>one</li>
108<li>one</li>
109<li>one</li>
110<li>one</li>
111<li>one</li>
112<li>one</li>
113<li>one</li>
114<li>one</li>
115<li>one</li>
116<li>one</li>
117<li>one</li>
118<li>one</li>
119<li>one</li>
120<li>one</li>
121<li>one</li>
122<li>one</li>
123<li>one</li>
124<li>one</li>
125<li>one</li>
126<li>one</li>
127<li>one</li>
128<li>one</li>
129<li>one</li>
130<li>one</li>
131</ul>
132
133</div>
134
135<pre id="debug"></pre>
136
137<script type="text/javascript" language="javascript" charset="utf-8">
138// <![CDATA[
139//  Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
140Position.includeScrollOffsets = true;
141
142Sortable.create('thelist2',{scroll:'scroll-container'});
143Sortable.create('thelist2-mod',{scroll:'scroll-container-mod'});
144
145// ]]>
146</script>
147</body>
148</html>
Note: See TracBrowser for help on using the browser.