Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 136 lines (120 sloc) 3.858 kB
5b139d5 @davglass Most of DD examples ported to Selleck
davglass authored
1 <div class="intro">
2 <p>This example shows a simple drag interaction that doesn't require a drop interaction.</p>
3 </div>
4
5 <div class="example">
6 {{>groups-drag-source}}
7 </div>
8
9 <h3>Setting up the Work Area</h3>
10 <p>First we need to create the work area, players (drags) and slots (drops).</p>
11
12 ```
13 {{>groups-drag-source-html}}
14 ```
15
16 <p>Now we give them some CSS to make them visible.</p>
17
18 ```
19 {{>groups-drag-source-css}}
20
21 ```
22
23 <h4>Setting up the YUI Instance</h4>
24 <p>Now we need to create our YUI instance and tell it to load the `dd-drop`, `dd-proxy` and `dd-constrain` modules.</p>
25
26 ```
27 YUI().use('dd-drop', 'dd-proxy', 'dd-constrain');
28 ```
29
30 <h4>Setting up the Drop Targets</h4>
31 <p>Now that we have a YUI instance with the requested modules, we are going to create our Drop Targets.</p>
32
33 ```
34 YUI().use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
35 //Get all the nodes with the class of .slot under #workarea
36 var slots = Y.one('#workarea').all('.slot');
37 //Loop through them
38 Y.each(slots, function(v, k) {
39 var id = v.get('id'), groups = ['two'];
40 //Assign them to different groups
41 switch (id) {
42 case 't1':
43 case 't2':
44 groups = ['one'];
45 break;
46 }
47 //Create the Drop object
48 var drop = new Y.DD.Drop({
49 node: v,
50 //With the new groups array as a config option
51 groups: groups
52 });
53 });
54 });
55 ```
56
57 <h4>Setting up the Drag Nodes</h4>
58 <p>Now we need to create the Drag Nodes and assign them to the proper group.</p>
59
60 ```
61 YUI().use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
62 //Snipped
63 var players = Y.one('#workarea').all('.player');
64 Y.each(players, function(v, k) {
65 var id = v.get('id'), groups = ['one', 'two'];
66 switch (id) {
67 case 'pt1':
68 case 'pt2':
69 groups = ['one'];
70 break;
71 case 'pb1':
72 case 'pb2':
73 groups = ['two'];
74 break;
75 }
76 var drag = new Y.DD.Drag({
77 node: v,
78 //Assign the Groups
79 groups: groups,
80 //Use Intersect Mode for the Target Calculations
81 dragMode: 'intersect',
82 }).plug(Y.Plugin.DDProxy, {
83 //We don't want the node to move on end drag
84 moveOnEnd: false
85 }).plug(Y.Plugin.DDConstrained, {
86 //Keep me inside the workarea
87 constrain2node: '#workarea'
88 });
89 });
90 ```
91
92 <h4>Handling the Drops and Moments</h4>
93 <p>Now we are going to listen for the following Drag Events: `drag:start, drag:end, drag:drophit, drag:dropmiss`</p>
94
95 ```
96 drag.on('drag:start', function() {
97 //In this event we setup some styles to make the nodes look pretty
98 var p = this.get('dragNode'),
99 n = this.get('node');
100 n.setStyle('opacity', .25);
101 if (!this._playerStart) {
102 this._playerStart = this.nodeXY;
103 }
104 //Put the Drag's HTML inside the proxy
105 p.set('innerHTML', n.get('innerHTML'));
106 //set some styles on the proxy
107 p.setStyles({
108 backgroundColor: n.getStyle('backgroundColor'),
109 color: n.getStyle('color'),
110 opacity: .65
111 });
112 });
113 drag.on('drag:end', function() {
114 //Undo some of the styles from the start
115 var n = this.get('node');
116 n.setStyle('opacity', '1');
117 });
118 drag.on('drag:drophit', function(e) {
119 //If we drop on a target, move to its position
120 var xy = e.drop.get('node').getXY();
121 this.get('node').setXY(xy);
122 });
123 drag.on('drag:dropmiss', function(e) {
124 //If we miss a target, move back to our start position
125 if (this._playerStart) {
126 this.get('node').setXY(this._playerStart);
127 this._playerStart = null;
128 }
129 });
130 ```
131
132 <h4>Full Javascript Code</h4>
133 ```
134 {{>groups-drag-source-js}}
135 ```
Something went wrong with that request. Please try again.