YUI Library Examples: Drag & Drop: Interaction Groups

+ +

Drag & Drop: Interaction Groups

+ + + +

Setting up the Work Area

First we need to create the work area, players (drags) and slots (drops).

+ +

Now we give them some CSS to make them visible.

+ + +

Setting up the YUI Instance

Now we need to create our YUI instance and tell it to load the dd-drop, dd-proxy and dd-constrain modules.

+ + +

Setting up the Drop Targets

Now that we have a YUI instance with the requested modules, we are going to create our Drop Targets.

+ + +

Setting up the Drag Nodes

Now we need to create the Drag Nodes and assign them to the proper group.

+ +

Handling the Drops and Moments

Now we are going to listen for Four Drag Events: drag:start, drag:end, drag:drophit, drag:dropmiss

+drag.on('drag:start', function() {
+    //In this event we setup some styles to make the nodes look pretty
+    var p = this.get('dragNode'),
+        n = this.get('node');
+        n.setStyle('opacity', .25);
+        if (!this._playerStart) {
+            this._playerStart = this.nodeXY;
+        }
+    //Put the Drag's HTML inside the proxy
+    p.set('innerHTML', n.get('innerHTML'));
+    //set some styles on the proxy
+    p.setStyles({
+        backgroundColor: n.getStyle('backgroundColor'),
+        color: n.getStyle('color'),
+        opacity: .65
+    });
+});
+drag.on('drag:end', function() {
+    //Undo some of the styles from the start
+    var n = this.get('node');
+    n.setStyle('opacity', '1');
+});
+drag.on('drag:drophit', function(e) {
+    //If we drop on a target, move to its position
+    var xy = e.drop.get('node').getXY();
+    this.get('node').setXY(xy);
+});
+drag.on('drag:dropmiss', function(e) {
+    //If we miss a target, move back to our start position
+    if (this._playerStart) {
+        this.get('node').setXY(this._playerStart);
+        this._playerStart = null;
+    }
+});
+

+ +

Full Javascript Code

+YUI({base:"../../build/", timeout: 10000}).use('dd-drop', 'dd-proxy', 'dd-constrain', function(Y) {
+    
+    var slots = Y.Node.get('#workarea').queryAll('.slot');
+    Y.each(slots, function(v, k) {
+        var id = v.get('id'), groups = ['two'];
+        switch (id) {
+            case 't1':
+            case 't2':
+                groups = ['one'];
+                break;
+        }
+        var drop = new Y.DD.Drop({
+            node: v,
+            groups: groups
+        });
+    });
+
+    var players = Y.Node.get('#workarea').queryAll('.player');
+    Y.each(players, function(v, k) {
+        var id = v.get('id'), groups = ['one', 'two'];
+        switch (id) {
+            case 'pt1':
+            case 'pt2':
+                groups = ['one'];
+                break;
+            case 'pb1':
+            case 'pb2':
+                groups = ['two'];
+                break;
+        }
+        var drag = new Y.DD.Drag({
+            node: v,
+            groups: groups,
+            dragMode: 'intersect'
+        }).plug(Y.Plugin.DDProxy, {
+            moveOnEnd: false
+        }).plug(Y.Plugin.DDConstrained, {
+            constrain2node: '#workarea'
+        });
+        drag.on('drag:start', function() {
+            var p = this.get('dragNode'),
+                n = this.get('node');
+                n.setStyle('opacity', .25);
+                if (!this._playerStart) {
+                    this._playerStart = this.nodeXY;
+                }
+            p.set('innerHTML', n.get('innerHTML'));
+            p.setStyles({
+                backgroundColor: n.getStyle('backgroundColor'),
+                color: n.getStyle('color'),
+                opacity: .65
+            });
+        });
+        drag.on('drag:end', function() {
+            var n = this.get('node');
+            n.setStyle('opacity', '1');
+        });
+        drag.on('drag:drophit', function(e) {
+            var xy = e.drop.get('node').getXY();
+            this.get('node').setXY(xy);
+        });
+        drag.on('drag:dropmiss', function(e) {
+            if (this._playerStart) {
+                this.get('node').setXY(this._playerStart);
+                this._playerStart = null;
+            }
+        });
+    });
+
+
+});
+

YUI Library Examples: Drag & Drop: Interaction Groups

Drag & Drop: Interaction Groups

Setting up the Work Area

Setting up the YUI Instance

Setting up the Drop Targets

Setting up the Drag Nodes

Handling the Drops and Moments

Full Javascript Code

+ Drag & Drop Examples:

More Drag & Drop Resources: