1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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";
25 <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
27 <script type="text/javascript" src="../../dnd/Container.js"></script>
28 <script type="text/javascript" src="../../dnd/Selector.js"></script>
29 <script type="text/javascript" src="../../dnd/Source.js"></script>
30 <script type="text/javascript" src="../../dnd/Avatar.js"></script>
31 <script type="text/javascript" src="../../dnd/Manager.js"></script>
33 <script type="text/javascript">
34 dojo.require("dojo.parser");
35 dojo.require("dojo.dnd.Source");
40 c1 = new dojo.dnd.Source("container1");
41 c1.insertNodes(false, [1, "A", [1, 2, 3],
42 function(x){ return x + x; },
43 {toString: function(){ return "CUSTOM!"; }},
46 // example subscribe to events
47 dojo.subscribe("/dnd/start", function(source){
48 console.debug("Starting the drop", source);
50 dojo.subscribe("/dnd/drop/before", function(source, nodes, copy, target){
52 console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
55 dojo.subscribe("/dnd/drop", function(source, nodes, copy, target){
57 console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
60 dojo.connect(c4, "onDndDrop", function(source, nodes, copy, target){
62 console.debug(copy ? "Copying from" : "Moving from", source);
71 <h1 class="testTitle">Dojo DnD test</h1>
73 <p>Elements of both sources/targets were created dynamically.</p>
74 <p>Following selection modes are supported by default:</p>
76 <li>Simple click — selects a single element, all other elements will be unselected.</li>
77 <li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li>
78 <li>Shift+click — selects a range of element from the previous anchor to the current element.</li>
79 <li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li>
81 <p>Following drop modes are supported by default:</p>
83 <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>
84 <li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li>
88 <div style="float: left; margin: 5px;">
90 <div id="container1" class="container"></div>
92 <div style="float: left; margin: 5px;">
94 <div dojoType="dojo.dnd.Source" jsId="c2" class="container">
95 <div class="dojoDndItem">Item <strong>X</strong></div>
96 <div class="dojoDndItem">Item <strong>Y</strong></div>
97 <div class="dojoDndItem">Item <strong>Z</strong></div>
100 <div style="float: left; margin: 5px;">
102 <div dojoType="dojo.dnd.Source" jsId="c3" class="container">
103 <script type="dojo/method" event="creator" args="item, hint">
104 // this is custom creator, which changes the avatar representation
105 var node = dojo.doc.createElement("div"), s = String(item);
106 node.id = dojo.dnd.getUniqueId();
107 node.className = "dojoDndItem";
108 node.innerHTML = (hint != "avatar" || s.indexOf("Item") < 0) ?
109 s : "<strong style='color: darkred'>Special</strong> " + s;
110 return {node: node, data: item, type: ["text"]};
112 <div class="dojoDndItem">Item <strong>Alpha</strong></div>
113 <div class="dojoDndItem">Item <strong>Beta</strong></div>
114 <div class="dojoDndItem">Item <strong>Gamma</strong></div>
115 <div class="dojoDndItem">Item <strong>Delta</strong></div>
118 <div style="float: left; margin: 5px;">
119 <h3>Pure Target 4</h3>
120 <div dojoType="dojo.dnd.Target" jsId="c4" class="container">
121 <div class="dojoDndItem">One item</div>
124 <div class="clear"></div>