root/public/javascripts/scriptaculous/test/functional/dragdrop8_test.html @ 3

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

Version one -> initial work from the laptop.
Line 
1<html>
2<head>
3<title>Drag &amp; Drop</title>
4
5<style type="text/css">
6
7td
8{
9 width: 10em;
10 text-align: center;
11}
12
13table.mytable {
14        list-style-type: none;
15        padding: 4px 4px 0 4px;
16        margin: 0px;
17        font-size: 13px;
18        font-family: Arial, sans-serif;
19}
20
21table.mytable tr {
22        margin-bottom: 4px;
23        padding: 2px 2px;
24        border: 1px solid #c00;
25        background-color: #eee;
26}
27
28div.draggable {
29  cursor:move;
30  padding:2px;
31  background-color: #BBCCDD;
32}
33
34div.dropsite {
35  padding:2px;
36  background-color: #DDBB99;
37}
38
39div.hoverclass123
40{
41        border:1px solid red;
42}
43
44</style>
45
46<script language="JavaScript" type="text/javascript" src="../../lib/prototype.js"></script>
47<script language="JavaScript" type="text/javascript" src="../../src/scriptaculous.js"></script>
48<script language="JavaScript" type="text/javascript">
49
50Position.includeScrollOffsets = true;
51
52window.onload = function()
53{
54        var t1 = document.getElementById("t1");
55        add_divs(t1, 'td', 'draggable');
56        var trs = t1.getElementsByTagName("tr");
57        for (var i = 0; i < trs.length; i++)
58        {
59                var divs = document.getElementsByClassName("draggable", trs[i]);
60                var drag_text = divs[2].innerHTML;
61                for (var j = 0; j < divs.length; ++j)
62                {
63                        new Draggable(divs[j], {ghosting:true, revert:true});
64                }
65        }
66
67        var t2 = document.getElementById("t2");
68        add_divs(t2, 'td', 'dropsite');
69        var divs = document.getElementsByClassName("dropsite", t2);
70        for (var j = 0; j < divs.length; ++j)
71        {
72                Droppables.add(divs[j], {accept:'draggable',
73                                                                         hoverclass:'hoverclass123',
74                                                                         onDrop:function(element, dropon, event)
75                                                                                 { debug("dropped " + element.innerHTML + " on "
76                                                                                                        + dropon.innerHTML + "\n")}});
77        }
78};
79
80function debug(text)
81{
82   document.getElementById('debug').innerHTML
83       = "<pre>" + text + "</pre>";
84}
85
86function add_divs(table, tag, classname)
87{
88        var items = table.getElementsByTagName(tag);
89        for (var i = 0; i < items.length; i++)
90                items[i].innerHTML =
91                        "<div class='" + classname + "'>" + items[i].innerHTML + "</div>";
92}
93
94
95</script>
96</head>
97<body>
98
99<p>Drag from this table:</p>
100<DIV STYLE="padding-left: 50pt;">
101<DIV STYLE="overflow: auto; width: 250; height: 100;
102            border: 1px gray solid;
103            padding:0px; margin: 0px;">
104<table id="t1" class="sortable mytable">
105    <tr><td>one</td><td>1</td><td>uno</td></tr>
106    <tr><td>two</td><td>2</td><td>dos</td></tr>
107    <tr><td>three</td><td>3</td><td>tres</td></tr>
108    <tr><td>four</td><td>4</td><td>quatro</td></tr>
109    <tr><td>five</td><td>5</td><td>cinco</td></tr>
110    <tr><td>six</td><td>6</td><td>seis</td></tr>
111    <tr><td>seven</td><td>7</td><td>siete</td></tr>
112    <tr><td>eight</td><td>8</td><td>ocho</td></tr>
113    <tr><td>nine</td><td>9</td><td>nueve</td></tr>
114    <tr><td>ten</td><td>10</td><td>diez</td></tr>
115</table>
116</DIV>
117</DIV>
118<p>
119<p>Drop on this table:</p>
120<DIV STYLE="padding-left: 50pt;">
121<DIV STYLE="overflow: auto; width: 250; height: 100;
122            border: 1px gray solid;
123            padding:0px; margin: 0px;">
124<table id="t2" class="sortable mytable">
125    <tr><td>eleven</td><td>11</td><td>once</td></tr>
126    <tr><td>twelve</td><td>12</td><td>doce</td></tr>
127    <tr><td>thirteen</td><td>13</td><td>trece</td></tr>
128    <tr><td>fourteen</td><td>14</td><td>catorce</td></tr>
129    <tr><td>fifteen</td><td>15</td><td>quince</td></tr>
130    <tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr>
131    <tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr>
132    <tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr>
133    <tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr>
134    <tr><td>twenty</td><td>20</td><td>veinte</td></tr>
135</table>
136</DIV>
137</DIV>
138<p>
139<div id="debug"></div>
140</p>
141</body>
142</html>
Note: See TracBrowser for help on using the browser.