drag-and-drop - YUI 3.0拖放，获取Drop目标属性

Question

全部，

我对 JavaScript 还很陌生，这是我第一次尝试 YUI 3.0 框架。我正在尝试创建一些东西，当我将“玩家”div 拖到“插槽/放置”div 上时，然后弹出警报，告诉我拖动的 div 和放置目标(插槽/放置)中的项目编号和一些其他属性。我可以获得针对拖动的 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, 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

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

如果您使用alert(target._node.id)(在该方法的范围内)，您将获得放置目标的ID。

要仔细查看目标对象，请使用控制台并将其吐出，如下所示:

console.log(target);

您需要使用 Chrome，或者安装 FireBug AddOn 才能使 console.log 正常工作。如果没有的话，JavaScript 渲染就会崩溃。

您应该能够将该代码片段添加到任何 Drag.on 方法中。