Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #6134: dragdrop_highlight_test.html

File dragdrop_highlight_test.html, 3.2 kB (added by jcott33@hotmail.com, 2 years ago)

Functional test showing results of patch

Line 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2                 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5 <head>
6 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
7 <title>Drag and Drop Highlight Test</title>
8 <script src="../../lib/prototype.js" type="text/javascript"></script>
9 <script src="../../src/scriptaculous.js" type="text/javascript"></script>
10 <style type="text/css">
11 <!--
12 .receiver { background: #FFFFFF; border: solid 1px #000000; padding: 5px 50px; margin-bottom: 5px }
13 .draggable { background: #FFFFD0; cursor: pointer; border: solid 1px #000000; padding: 5px; margin-bottom: 5px }
14 .receiver_hover { background: #A0A0B0 }
15 -->
16 </style>
17
18 <script type="text/javascript">
19 <!--
20 function ondrop_with(draggable, receiver)
21 {
22         new Effect.Highlight(receiver.id, { restorecolor: ''});
23 }
24
25 function ondrop_without(draggable, receiver)
26 {
27         new Effect.Highlight(receiver.id);
28 }
29 // -->
30 </script>
31 </head>
32 <body>
33
34
35 <b>Without blank restorecolor on Effect.Highlight<br/>
36 (hoverclass no longer changes background after first drop)</b><br/>
37
38 <table>
39 <tr>
40 <td>
41 <div id="box1_1" class="receiver">Drag here</div>
42 <div id="box1_2" class="receiver">Drag here</div>
43 <div id="box1_3" class="receiver">Drag here</div>
44 <div id="box1_4" class="receiver">Drag here</div>
45 <div id="box1_5" class="receiver">Drag here</div>
46 <div id="box1_6" class="receiver">Drag here</div>
47 <div id="box1_7" class="receiver">Drag here</div>
48 </td>
49
50 <td style="padding-left: 20px" valign="top">
51 <table>
52 <tr><td><div id="drag1" class="draggable">Drag me</div></td></tr>
53 </table>
54 </td>
55 </tr>
56 </table>
57
58 <p>&nbsp;</p>
59
60 <b>With blank restorecolor on Effect.Highlight</b><br/>
61
62 <table>
63 <tr>
64 <td>
65 <div id="box2_1" class="receiver">Drag Here</div>
66 <div id="box2_2" class="receiver">Drag Here</div>
67 <div id="box2_3" class="receiver">Drag Here</div>
68 <div id="box2_4" class="receiver">Drag Here</div>
69 <div id="box2_5" class="receiver">Drag Here</div>
70 <div id="box2_6" class="receiver">Drag Here</div>
71 <div id="box2_7" class="receiver">Drag Here</div>
72 </td>
73
74 <td style="padding-left: 20px" valign="top">
75 <table>
76 <tr><td><div id="drag2" class="draggable">Drag me</div></td></tr>
77 </table>
78 </td>
79 </tr>
80 </table>
81
82 <script type="text/javascript">
83 <!--
84 var import_options_with = { onDrop: ondrop_with, hoverclass: 'receiver_hover' };
85 var import_options_without = { onDrop: ondrop_without, hoverclass: 'receiver_hover' };
86 new Draggable('drag1', { revert: true } );
87 new Draggable('drag2', { revert: true } );
88
89 Droppables.add('box1_1', import_options_without );
90 Droppables.add('box1_2', import_options_without );
91 Droppables.add('box1_3', import_options_without );
92 Droppables.add('box1_4', import_options_without );
93 Droppables.add('box1_5', import_options_without );
94 Droppables.add('box1_6', import_options_without );
95 Droppables.add('box1_7', import_options_without );
96
97 Droppables.add('box2_1', import_options_with );
98 Droppables.add('box2_2', import_options_with );
99 Droppables.add('box2_3', import_options_with );
100 Droppables.add('box2_4', import_options_with );
101 Droppables.add('box2_5', import_options_with );
102 Droppables.add('box2_6', import_options_with );
103 Droppables.add('box2_7', import_options_with );
104 // -->
105 </script>
106 </body>
107 </html>