YUI 3.0拖放，获得Drop目标属性

如何解决YUI 3.0拖放，获得Drop目标属性

| 所有，我对JavaScript非常陌生，这是我第一次尝试使用YUI 3.0框架。我正在尝试创建一些东西，当我将\'player \'div拖动到\'slot / drop \'div上，然后弹出警报，告诉我项目编号和拖动的div和drop目标中的一些其他属性（插槽/放下）。我可以使警报适用于拖动的div，但在引用放置目标div并获取其属性时遇到了困难。有人可以帮忙吗？如果您需要更多信息，请告诉我。我之所以需要它，是因为我有多个放置目标，并且需要找出放置在哪个特定目标上。感谢您的帮助！

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


});

解决方法

在drag.on drag：drophit方法中添加以下内容：

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

所以现在看起来像：

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

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

如果您警告（target._node.id）（在该方法的范围内），则将具有放置目标的ID。要仔细查看目标对象，请使用控制台并将其吐出，如下所示：

console.log(target);

您需要使用Chrome，或安装FireBug插件才能使console.log正常工作。没有这些，JavaScript渲染就会崩溃。您应该能够将该代码段添加到任何drag.on方法中。