1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo DnD test</title>
<style type="text/css">
@import "../../resources/dojo.css";
@import "../../resources/dnd.css";
@import "dndDefault.css";
body {
padding: 1em;
background: #ededed;
}
.container {
width: 100px;
display: block;
}
.clear {
clear: both;
}
</style>
<script type="text/javascript" src="../../dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../dnd/Container.js"></script>
<script type="text/javascript" src="../../dnd/Selector.js"></script>
<script type="text/javascript" src="../../dnd/Source.js"></script>
<script type="text/javascript" src="../../dnd/Avatar.js"></script>
<script type="text/javascript" src="../../dnd/Manager.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.dnd.Source");
var c1;
function init(){
c1 = new dojo.dnd.Source("container1");
c1.insertNodes(false, [1, "A", [1, 2, 3],
function(x){ return x + x; },
{toString: function(){ return "CUSTOM!"; }},
null]);
// example subscribe to events
dojo.subscribe("/dnd/start", function(source){
console.debug("Starting the drop", source);
});
dojo.subscribe("/dnd/drop/before", function(source, nodes, copy, target){
if(target == c1){
console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
}
});
dojo.subscribe("/dnd/drop", function(source, nodes, copy, target){
if(target == c1){
console.debug(copy ? "Copying from" : "Moving from", source, "to", target, "before", target.before);
}
});
dojo.connect(c4, "onDndDrop", function(source, nodes, copy, target){
if(target == c4){
console.debug(copy ? "Copying from" : "Moving from", source);
}
});
};
dojo.addOnLoad(init);
</script>
</head>
<body>
<h1 class="testTitle">Dojo DnD test</h1>
<p>Elements of both sources/targets were created dynamically.</p>
<p>Following selection modes are supported by default:</p>
<ul>
<li>Simple click — selects a single element, all other elements will be unselected.</li>
<li>Ctrl+click — toggles a selection state of an element (use Meta key on Mac).</li>
<li>Shift+click — selects a range of element from the previous anchor to the current element.</li>
<li>Ctrl+Shift+click — adds a range of element from the previous anchor to the current element (use Meta key on Mac).</li>
</ul>
<p>Following drop modes are supported by default:</p>
<ul>
<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>
<li>Ctrl+drop — copies elements to the valid target (use Meta key on Mac).</li>
</ul>
<div id="dragLists">
<div style="float: left; margin: 5px;">
<h3>Source 1</h3>
<div id="container1" class="container"></div>
</div>
<div style="float: left; margin: 5px;">
<h3>Source 2</h3>
<div dojoType="dojo.dnd.Source" jsId="c2" class="container">
<div class="dojoDndItem">Item <strong>X</strong></div>
<div class="dojoDndItem">Item <strong>Y</strong></div>
<div class="dojoDndItem">Item <strong>Z</strong></div>
</div>
</div>
<div style="float: left; margin: 5px;">
<h3>Source 3</h3>
<div dojoType="dojo.dnd.Source" jsId="c3" class="container">
<script type="dojo/method" event="creator" args="item, hint">
// this is custom creator, which changes the avatar representation
var node = dojo.doc.createElement("div"), s = String(item);
node.id = dojo.dnd.getUniqueId();
node.className = "dojoDndItem";
node.innerHTML = (hint != "avatar" || s.indexOf("Item") < 0) ?
s : "<strong style='color: darkred'>Special</strong> " + s;
return {node: node, data: item, type: ["text"]};
</script>
<div class="dojoDndItem">Item <strong>Alpha</strong></div>
<div class="dojoDndItem">Item <strong>Beta</strong></div>
<div class="dojoDndItem">Item <strong>Gamma</strong></div>
<div class="dojoDndItem">Item <strong>Delta</strong></div>
</div>
</div>
<div style="float: left; margin: 5px;">
<h3>Pure Target 4</h3>
<div dojoType="dojo.dnd.Target" jsId="c4" class="container">
<div class="dojoDndItem">One item</div>
</div>
</div>
<div class="clear"></div>
</div>
<p>HTML after</p>
</body>
</html>
|
