(Resolvido) Problemas com evento onDrop

[vini_loock]

Olá galera!

Estou tentando usar a API File do HTML5, mas estou com problemas no evento ondrop.

Na parte em que eu tento isso:

var file = evt.dataTransfer.files[0],

Diz que evt.dataTransfer é 'undefined' A parte do código que importa está aqui:

var Events = {
    dragDrop: (function($){
        return function(evt){
            var file = evt.dataTransfer.files[0],
                reader = new FileReader;
            
            reader.onload = function(e){
                $('content.applicationContent').append('<img src="'+e.target.result+'" />')
            }
            
            reader.readAsDataUrl(file);
            
            return false;
        }
    })(jQuery)
};

(function($){
    $(document).ready(function(){
        $(this).bind('drop', function(e){return Events.dragDrop(e)});
        
    });
})(jQuery);

Mas caso prefira, o código todo:

var Gui = {
    start: (function($){
        return function(){
            $('.application')
                .width($(window).width())
                .height($(window).height())
                .find('content.applicationContent')
                    .height($('.application').height()-100);
        }
    })(jQuery)
};

var start = (function($){
    return function(){
        $('.application').each(function(){
            $(this).width($(window).width()).height($(window).height());
            $(this).find('content.applicationContent').height($(this).height()-100);
        });
    }
})(jQuery);

var Events = {
    dragOver: (function($){
        return function(evt){
            return false;
        }
    })(jQuery),
    dragEnd: (function($){
        return function(){
            return false;
        }
    })(jQuery),
    dragDrop: (function($){
        return function(evt){
            var file = evt.dataTransfer.files[0],
                reader = new FileReader;
            
            reader.onload = function(e){
                $('content.applicationContent').append('<img src="'+e.target.result+'" />')
            }
            
            reader.readAsDataUrl(file);
            
            return false;
        }
    })(jQuery)
};

(function($){
    
    $(document).ready(function(){
        
        Gui.start();
        
        $(this).bind('dragover', function(e){return Events.dragOver(e)});
        $(this).bind('dragend', function(e){return Events.dragEnd(e)});
        $(this).bind('drop', function(e){return Events.dragDrop(e)});
        
        $(window).resize(function(){
            return Gui.start();
        });
        
    });
    
})(jQuery);

Ele está executando o evento drop normal, mas o problema parece ser na variável 'e' da função anonima, que aparentemente não está vindo como deveria.

Unica pista que eu tenho é esta mensagem no console do chrome:

• Uncaught TypeError: Cannot read property 'files' of undefined mp3.js:21
  • Events.dragDrop mp3.js:21

  • (anonymous function) mp3.js:38

  • f.event.dispatch jquery.js:3256

  • f.event.add.h.handle.i jquery.js:2875

Esse arquivo mp3.js que aparece na mensagem é o código que postei e o jquery.js é a jQuery. Editado Janeiro 25, 2012 por vini_loock

[vini_loock]

UP! dei esse up porque editei todo o tópico. já que não teve resposta e o problema só mudou de lugar, penso que seria inutil criar um novo tópico. Me perdoem se fiz algo do mal xD

[vini_loock]

Consegui resolver, percebi que o problema está nos métodos da jQuery aplicar eventos, então "copiei" o addEvent da motools e passou a funcionar normal.

$.fn.extend({
        addEvent: function(evt, fn){
            return this.each(function(){
                this.addEventListener(evt, fn, false);
            });
        }
    })