Question

All,

I’m pretty new with JavaScript and this is my first attempt with the YUI 3.0 framework. I’m trying to create something where when I drag a ‘player’ div onto a ‘slot/drop’ div and then alert pops up telling me the project number and some other attributes from the dragged div and drop target (slot/drop). I can get the alert to work for the dragged div but am having a hard time referencing the drop target div and getting it’s attributes. Could someone assist? If you need more info let me know.

The reason I need this is due to the fact that I have multiple drop targets and need to find out which particular target was dropped on.

I appreciate any help!

YUI({ filter: 'raw' }).use('dd-drop', 'dd-proxy', 'dd-constrain', 'dd-ddm-drop', function(Y) {

var slots = Y.one('#workarea').all('.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.one('#workarea').all('.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');
    var project_number = n.getAttribute('project_number');
            var div_number= n.getAttribute('div_number');
            alert ( "! " + project_number + " ! " + track_number + " ! ");
    self.location='project.php?project=' + project + '&div_id=' + div_number; [/code]

    });


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


});

Answer 1

In the drag.on drag:drophit method add this:

var target = e.drop.get('node');

So now it would look like:

drag.on('drag:drophit', function(e) {
    var xy = e.drop.get('node').getXY();
    this.get('node').setXY(xy);

    var target = e.drop.get('node');
});

If you alert(target._node.id) (within the scope of that method) you’ll have the id of the drop target.

To take a closer look at the target object use console and spit it out like so:

console.log(target);

You’ll need to be using Chrome, or have the FireBug AddOn installed for console.log to work. Without you’ll crash the javascript rendering.

You should be able to add that snippet into any of the drag.on methods.