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
        });
    });

});