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

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

Version one -> initial work from the laptop.
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
5<title></title>
6<script src="../../lib/prototype.js" type="text/javascript"></script>
7<script src="../../src/scriptaculous.js" type="text/javascript"></script>
8<script type="text/javascript">
9//<![CDATA[
10
11Position.includeScrollOffsets = true;
12
13Draggables.clear = function (event) {
14        while (Draggables.drags.length) {
15                var d = Draggables.drags.pop();
16                var e = d.element;
17                d.stopScrolling();
18                d.destroy();
19                d.element = null;
20                if (e.parentNode) {e.parentNode.removeChild(e)}; 
21        }
22}
23
24function cleanup() { //try to remove circular references
25        lis = document.getElementsByTagName("li");
26        for (i = 0; i < lis.length; i++) {
27                if (lis[i].longListItem) {lis[i].longListItem.destroy();}
28                else if (lis[i].container) {lis[i].container.destroy();}
29        }
30        Draggables.clear();
31}
32
33window.onload = function() {
34        var li = $("masterList").getElementsByTagName('LI');
35        for (var i = 0; i < li.length; i++) {
36                //var d = new LongListItem(li[i]);
37                //li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);
38                var d = new Draggable(li[i], 
39                        {revert: true,
40                         ghosting: false,
41                         scroll: "rightContainers"
42                        });
43
44        }
45       
46        var divs = $("rightContainers").getElementsByTagName("div");
47        for (i = 0; i < divs.length; i++) {
48                if (divs[i].className && Element.hasClassName(divs[i], "container")) {
49                        Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
50                }
51        }
52        Event.observe(window, 'unload', cleanup, false);
53}
54//]]>
55</script>
56<style type="text/css">
57html, body {
58        margin:0; padding: 0;
59        height: 100% !important;
60}
61body {
62        position:relative;
63        color: black;
64        background-color: white;
65        font-family: Verdana, Arial, Helvetica, sans-serif;
66        font-size: small;
67}
68h1 {font-size:115%;}
69h2 {font-size: 110%;}
70h3 {font-size: 105%;}
71div, p, li, td {
72        font-family: Verdana, Arial, Helvetica, sans-serif;
73        font-size: small;
74}
75p {margin: 0 0 .7em 0; padding:0;}
76ul {
77        position:relative;
78        list-style: none;
79        margin:0; padding:0;
80        overflow: visible;
81}
82li {position:relative;}
83
84.instructions {font-style:italic;}
85#leftDiv {
86        position: absolute;
87        top: 0; left: 0;        bottom: 0;
88        width: 30%;
89        margin: 0; padding: 7px;
90        border-right: 2px solid #bb9;
91        background-color: #eed;
92}
93
94#leftDiv li, #rightContainers div.container li  {
95        margin: 3px 0; padding: 3px 3em 3px 10px;
96        border: 2px solid #456;
97        background-color: #cde;
98        cursor: move;
99}
100
101#rightContainers {
102        padding: .5em;
103        position: absolute;
104        top: 0; bottom: 0; right: 0; left: 35%;
105        overflow:auto;
106}
107
108#rightContainers div.container{
109        background-color: #bb9;
110        margin: 0 0 40px 0; padding: 0 0 1px 0;
111        border: 2px solid #775;
112}
113
114#rightContainers div.container h2{
115        margin:0; padding: 2px 1em 0 1em;
116        text-align:center;
117}
118
119#rightContainers div.container ul {
120        margin: 5px; padding: 0 3px;
121        background-color: white;
122        border: 1px solid black;
123}
124
125#rightContainers div.container ul.empty {
126        padding: 3px 0;
127}
128
129#rightContainers div.hover {
130        background-color: #eed;
131}
132</style>
133<!--[if IE]><style type="text/css">
134#leftDiv {
135        height: expression((document.body.clientHeight - 44) + "px");
136}
137#leftDiv ul{width:93%;}
138#leftDiv li div.count {
139        right:4px;
140        top:4px;
141}
142#rightContainers li a.remove {
143        display:block;
144        float:none;
145        position:absolute;
146        top: 4px;
147        right: 1.6em;   
148        margin:0; padding:0 .2em;
149}
150</style><![endif]-->
151</head>
152<body>
153<div id="leftDiv" class="">
154<form id="frmContinue" action="#" method="post">
155<p class="instructions">Shrink your window until the right-hand pane is scrollable.</p>
156<p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p>
157<input name="data" type="hidden" value=" ">
158</form>
159<ul id="masterList">
160<li id="drag1">One</li>
161<li id="drag2">Two</li>
162<li id="drag3">Three</li>
163<li id="drag4">Four</li>
164<li id="drag5">Five</li>
165<li id="drag6">Six</li>
166<li id="drag7">Seven</li>
167<li id="drag8">Eight</li>
168</ul>
169</div>
170
171<div id="rightContainers" class="">
172</form>
173<div id="grp1" class="container">
174        <h2><span id="grp1_name">Group 1</span></h2>
175        <ul id="grp1ul" class="empty"></ul>
176</div>
177<div id="grp2" class="container">
178        <h2><span id="grp2_name">Group 2</span></h2>
179        <ul id="grp2ul" class="empty"></ul>
180</div>
181<div id="grp3" class="container">
182        <h2><span id="grp3_name">Group 3</span></h2>
183        <ul id="grp3ul" class="empty"></ul>
184</div>
185<div id="grp4" class="container">
186        <h2><span id="grp4_name">Group 4</span></h2>
187        <ul id="grp4ul" class="empty"></ul>
188</div>
189<div id="grp5" class="container">
190        <h2><span id="grp5_name">Group 5</span></h2>
191        <ul id="grp5ul" class="empty"></ul>
192</div>
193<div id="grp6" class="container">
194        <h2><span id="grp6_name">Group 6</span></h2>
195        <ul id="grp6ul" class="empty"></ul>
196</div>
197<div id="grp7" class="container">
198        <h2><span id="grp7_name">Group 7</span></h2>
199        <ul id="grp7ul" class="empty"></ul>
200</div>
201<div id="grp8" class="container">
202        <h2><span id="grp8_name">Group 8</span></h2>
203        <ul id="grp8ul" class="empty"></ul>
204</div>
205<div id="grp9" class="container">
206        <h2><span id="grp9_name">Group 9</span></h2>
207        <ul id="grp9ul" class="empty"></ul>
208</div>
209</div>
210</body>
211</html>
Note: See TracBrowser for help on using the browser.