drop event not firing on backbone view

I was happily coding and learning backbone when this #~@@! happened!

I use require to separate my views from models, etc.

In my Backbone view I handle this events:

define(['...'],function(...) {

var DishView = Backbone.View.extend({
    template: _.template(dish),
    tagName: 'div',
    id: 'dish',

    initialize: function() {
        console.log('initializing dishView');
        this.model.on('change', this.render, this);
    },

    render: function(){
        console.log('rendering dishView');
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        'click #relations-menu .newItem': 'launch_modal_relations',
        'click #delete' : 'delete_dish',
        'click #save-basic-changes': 'save_basic',
        'drop #dropPicture' : 'dropHandler',
        'dragenter #dropPicture' : 'alertMe'
    },

    alertMe: function () {
        console.log('clicked on image');
    },

    delete_dish: function () {
        this.model.deleteMyself();
        Backbone.history.navigate('/', {trigger: true});
    },

    save_basic: function (event) {
        var name = $('#inputName').val();
        var description = $('#inputDescription').val();
        var price = $('#inputPrice').val();
        this.model.updateBasicInfo(name, description, price);
    },

    dropHandler: function(event) {
        event.preventDefault();
        console.log('drop received');
        event.stopPropagation();

        var e = event.originalEvent;
        e.dataTransfer.dropEffect = 'copy';
        this.pictureFile = e.dataTransfer.files[0];
            ...

    },
return DishView;

});

My drag&drop was working and suddenly when a lot of more functionality was added, it stopped working :( the image file it's opened in the browser.

I've read about the DOM being ready and that this can happen sometimes (if the code gets evaluated when the DOM is ready) but the click events still get fired, also the dragenter event....

Could this be some typo?? I'm going a little bit crazy I can't understand whats going on and can't remember a good commit to go back and check :S

Thank you all if you can show some possible answers :)

For example: - how can I debug the drop event??? - how can I know if an event is tied to my view?

回答1:

You're not crazy. A recent update in Google Chrome broke the drop-into-browser feature for a lot of sites, including, it seems, the NodeCellar tutorial. This is quite easily fixable, though. Chrome now requires you to prevent the default action for the dragover event:

$('div').on('drop',function(e){
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    $(this).html('A file was dropped!');
}).on('dragover', function (e) {
  e.preventDefault();
});

This JSFiddle demo works for me (Chrome 24.0.1312.52). Here's the Chromium issue #168387, about this problem.

And a pull request to fix this in NodeCellar.

回答2:

You can on Backbone add into view this code:

events: {
....
....
    "drop #picture" : "dropHandler",
    "dragover #picture" : "dragOver"
},


dropHandler: function (event) {
    event.stopPropagation();
    event.preventDefault();
....
....
},

dragOver: function (event) {
    event.preventDefault();
}