Question

所有

我是JavaScript的新手，这是我第一次使用YUI 3.0框架。我正在尝试创建一些东西，当我将'player'div拖到'slot / drop'div上然后提醒弹出告诉我项目编号和拖动的div和drop目标中的一些其他属性（slot / drop）。我可以获得为拖动的div工作的警报，但我很难引用drop target 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');
});

如果你警告（target._node.id）（在该方法的范围内），你将拥有放置目标的id。

仔细查看目标对象使用控制台并将其吐出：

console.log(target);

您需要使用Chrome，或安装FireBug AddOn才能使用console.log。没有你会崩溃javascript渲染。

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

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

1 个答案: