1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
2 | <html>
|
3 | <head>
|
4 | <title>Dojo DnD test</title>
|
5 | <style type="text/css">
|
6 | @import "../../resources/dojo.css";
|
7 | @import "../../resources/dnd.css";
|
8 | @import "dndDefault.css";
|
9 | @import "../../../util/doh/robot/robot.css";
|
10 |
|
11 | body {
|
12 | padding: 1em;
|
13 | background: #ededed;
|
14 | }
|
15 |
|
16 | .container {
|
17 | width: 100px;
|
18 | display: block;
|
19 | }
|
20 |
|
21 | .clear {
|
22 | clear: both;
|
23 | }
|
24 | </style>
|
25 |
|
26 | <script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug: true"></script>
|
27 |
|
28 | <script type="text/javascript">
|
29 | require([
|
30 | "dojo/aspect", "dojo/parser", "dojo/topic", "dojo/dnd/Source", "dojo/domReady!"
|
31 | ], function(aspect, parser, topic, Source){
|
32 | parser.parse().then(function(){
|
33 | var c1 = new Source("container1");
|
34 | c1.insertNodes(false, [1, "A", [1, 2, 3],
|
35 | function(x){ return x + x; },
|
36 | {toString: function(){ return "CUSTOM!"; }},
|
37 | null]);
|
38 |
|
39 |
|
40 | topic.subscribe("/dnd/start", function(source){
|
41 | console.debug("Starting the drop", source);
|
42 | });
|
43 | topic.subscribe("/dnd/drop/before", function(source, nodes, copy, target){
|
44 | if(target == c1){
|
45 | console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
|
46 | }
|
47 | });
|
48 | topic.subscribe("/dnd/drop", function(source, nodes, copy, target){
|
49 | if(target == c1){
|
50 | console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
|
51 | }
|
52 | });
|
53 | aspect.after(c4, "onDndDrop", function(source, nodes, copy, target){
|
54 | if(target == c4){
|
55 | console.debug(copy ? "Copying from" : "Moving from", source);
|
56 | }
|
57 | }, true);
|
58 | });
|
59 | });
|
60 |
|
61 | </script>
|
62 | </head>
|
63 | <body>
|
64 | <h1 class="testTitle">Dojo DnD test</h1>
|
65 |
|
66 | <p>Elements of both sources/targets were created dynamically.</p>
|
67 | <p>Following selection modes are supported by default:</p>
|
68 | <ul>
|
69 | <li>Simple click — selects a single element, all other elements will be unselected.</li>
|
70 | <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li>
|
71 | <li>Shift+click — selects a range of element from the previous anchor to the current element.</li>
|
72 | <li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li>
|
73 | </ul>
|
74 | <p>Following drop modes are supported by default:</p>
|
75 | <ul>
|
76 | <li>Simple drop — moves elements to the valid target removing them from the source. It can be used to reorganize elements within a single source/target.</li>
|
77 | <li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li>
|
78 | </ul>
|
79 |
|
80 | <div id="dragLists">
|
81 | <div style="float: left; margin: 5px;">
|
82 | <h3>Source 1</h3>
|
83 | <div id="container1" class="container"></div>
|
84 | </div>
|
85 | <div style="float: left; margin: 5px;">
|
86 | <h3>Source 2 (copyOnly)</h3>
|
87 | <div data-dojo-type="dojo/dnd/Source" data-dojo-id="c2" class="container" copyOnly="true">
|
88 | <div class="dojoDndItem">Item <strong>X</strong></div>
|
89 | <div class="dojoDndItem">Item <strong>Y</strong></div>
|
90 | <div class="dojoDndItem">Item <strong>Z</strong></div>
|
91 | </div>
|
92 | </div>
|
93 | <div style="float: left; margin: 5px;">
|
94 | <h3>Source 3</h3>
|
95 | <script type="dojo/require">
|
96 | dnd: "dojo/dnd/common"
|
97 | </script>
|
98 | <div data-dojo-type="dojo/dnd/Source" data-dojo-id="c3" class="container" allowNested="true">
|
99 | <script type="dojo/method" data-dojo-event="creator" data-dojo-args="item, hint">
|
100 |
|
101 | var node = document.createElement("div"), s = String(item);
|
102 | node.id = dnd.getUniqueId();
|
103 | node.className = "dojoDndItem";
|
104 | node.innerHTML = (hint != "avatar" || s.indexOf("Item") < 0) ?
|
105 | s : "<strong style='color: darkred'>Special</strong> " + s;
|
106 | return {node: node, data: item, type: ["text"]};
|
107 | </script>
|
108 | <div class="dojoDndItem">Item <strong>Alpha</strong></div>
|
109 | <div class="nested">
|
110 | <div class="dojoDndItem">Item <strong>Beta</strong></div>
|
111 | <div class="dojoDndItem">Item <strong>Gamma</strong></div>
|
112 | <div class="dojoDndItem">Item <strong>Delta</strong></div>
|
113 | </div>
|
114 | </div>
|
115 | </div>
|
116 | <div style="float: left; margin: 5px;">
|
117 | <h3>Source 4 (copyOnly, selfAccept, delay=8)</h3>
|
118 | <div data-dojo-type="dojo/dnd/Source" data-dojo-id="c4" class="container" copyOnly="true" selfAccept="false" delay="8">
|
119 | <div class="dojoDndItem">Item 1</div>
|
120 | <div class="dojoDndItem">Item 2</div>
|
121 | <div class="dojoDndItem">Item 3</div>
|
122 | </div>
|
123 | </div>
|
124 | <div style="float: left; margin: 5px;">
|
125 | <h3>Pure Target 5</h3>
|
126 | <div data-dojo-type="dojo/dnd/Target" data-dojo-id="c5" class="container">
|
127 | <div class="dojoDndItem">One item</div>
|
128 | </div>
|
129 | </div>
|
130 | <div class="clear"></div>
|
131 | </div>
|
132 |
|
133 | <p>HTML after</p>
|
134 | <p>
|
135 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
|
136 | semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
|
137 | porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
|
138 | Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
|
139 | Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
|
140 | risus.
|
141 | </p>
|
142 | <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
|
143 | imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
|
144 | nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
|
145 | massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
|
146 | pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
|
147 | quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
|
148 | felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
|
149 | quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
|
150 | rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
|
151 | semper velit ante id metus. Praesent massa dolor, porttitor sed,
|
152 | pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
|
153 | tortor pharetra congue. Suspendisse pulvinar.
|
154 | </p>
|
155 | <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
|
156 | ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
|
157 | nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
|
158 | lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
|
159 | est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
|
160 | dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
|
161 | nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
|
162 | pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
|
163 | sociosqu ad litora torquent per conubia nostra, per inceptos
|
164 | hymenaeos.
|
165 | </p>
|
166 | <p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
|
167 | et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
|
168 | ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
|
169 | vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
|
170 | conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
|
171 | luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
|
172 | vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
|
173 | egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
|
174 | felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
|
175 | risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
|
176 | tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
|
177 | turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
|
178 | consectetuer dapibus eros. Aliquam nisl.
|
179 | </p>
|
180 |
|
181 | <p>
|
182 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
|
183 | semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
|
184 | porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
|
185 | Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
|
186 | Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
|
187 | risus.
|
188 | </p>
|
189 | <p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
|
190 | imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
|
191 | nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
|
192 | massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
|
193 | pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
|
194 | quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
|
195 | felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
|
196 | quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
|
197 | rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
|
198 | semper velit ante id metus. Praesent massa dolor, porttitor sed,
|
199 | pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
|
200 | tortor pharetra congue. Suspendisse pulvinar.
|
201 | </p>
|
202 | <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
|
203 | ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
|
204 | nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
|
205 | lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
|
206 | est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
|
207 | dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
|
208 | nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
|
209 | pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
|
210 | sociosqu ad litora torquent per conubia nostra, per inceptos
|
211 | hymenaeos.
|
212 | </p>
|
213 | <p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
|
214 | et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
|
215 | ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
|
216 | vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
|
217 | conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
|
218 | luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
|
219 | vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
|
220 | egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
|
221 | felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
|
222 | risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
|
223 | tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
|
224 | turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
|
225 | consectetuer dapibus eros. Aliquam nisl.
|
226 | </p>
|
227 | </body>
|
228 | </html>
|