YUI 3.0 Drag and Drop, получая атрибуты цели Drop - PullRequest
Новая
       4

YUI 3.0 Drag and Drop, получая атрибуты цели Drop

2 голосов
/ 22 июня 2011

All

Я довольно новичок в JavaScript, и это моя первая попытка с фреймворком YUI 3.0. Я пытаюсь создать что-то, где, когда я перетаскиваю div «player» на div «slot / drop», а затем выскакивает предупреждение, сообщающее мне номер проекта и некоторые другие атрибуты из перетаскиваемой цели div и drop (slot / 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, 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;
        }
    });
});


});

1 Ответ

5 голосов
/ 01 августа 2011

В методе 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) (в рамках этого метода), у вас будет идентификатор цели удаления.

Чтобы поближе взглянуть на целевой объект, используйте консоль и выплюните его так: 

console.log(target);

Вам нужно будет использовать Chrome или установить FireBug AddOn, чтобы console.log работал. Без сбоев рендеринг JavaScript.

Вы сможете добавить этот фрагмент в любой из методов drag.on.

...