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
131
<div class="intro">
<p>This example shows how to constrain a draggable Node to another Node's region.</p>
</div>
<div class="example">
{{>constrained-drag-source}}
</div>
<h3>Setting up the Node</h3>
<p>First we need to create the HTML structure used in this example.</p>
```
<div id="dd-demo-canvas1">
<div id="dd-demo-canvas2">
<div id="dd-demo-canvas3">
<div id="dd-demo-1" class="dd-demo"><div>1</div></div>
<div id="dd-demo-2" class="dd-demo"><div>2</div></div>
<div id="dd-demo-3" class="dd-demo"><div>3</div></div>
</div>
</div>
</div>
```
<p>Now we give the Nodes some CSS to make them visible.</p>
```
.dd-demo {
position: relative;
text-align: center;
color: #fff;
cursor: move;
height: 60px;
width: 60px;
padding: 0;
margin: 0;
}
.dd-demo div {
border: 1px solid black;
height: 58px;
width: 58px;
}
#dd-demo-canvas1 {
padding: 55px;
background-color: #004C6D;
border: 1px solid black;
}
#dd-demo-canvas2 {
padding: 25px;
background-color: #CDCDCD;
border: 1px solid black;
}
#dd-demo-canvas3 {
padding: 15px;
background-color: #8DD5E7;
border: 1px solid black;
}
#dd-demo-1 {
background-color: #8DD5E7;
top:5px;
left:5px;
color: #000;
}
#dd-demo-2 {
background-color: #CDCDCD;
top:50px;
left:100px;
color: #000;
}
#dd-demo-3 {
background-color: #004C6D;
top:-100px;
left:200px;
}
```
<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the `dd-constrain` module (that will load the dd-ddm and dd-drag modules too).</p>
```
YUI().use('dd-constrain');
```
<h3>Making the Nodes draggable</h3>
<p>Now that we have a YUI instance with the `dd-constrain` module, we need to instantiate the `Drag` instance on the Nodes.</p>
```
YUI().use('dd-constrain', function(Y) {
var dd1 = new Y.DD.Drag({
node: '#dd-demo-1'
});
var dd2 = new Y.DD.Drag({
node: '#dd-demo-2'
});
var dd3 = new Y.DD.Drag({
node: '#dd-demo-3'
});
});
```
<h3>Constrain the Nodes to other Nodes</h3>
<p>Now that we have the Nodes draggable, we need to constrain them. We can do this by plugging the `DDConstrained` on to the `Drag` instance and passing it a config option called `constrain2node` and giving it a selector string of the Node we want to constrain to.</p>
```
YUI().use('dd-constrain', function(Y) {
var dd1 = new Y.DD.Drag({
node: '#dd-demo-1'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas3'
});
var dd2 = new Y.DD.Drag({
node: '#dd-demo-2'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas2'
});
var dd3 = new Y.DD.Drag({
node: '#dd-demo-3'
}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#dd-demo-canvas1'
});
});
```