drop event not firing on backbone view

I was happily coding and learning backbone when this #[email protected]@! 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?

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 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.

Solution 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();
}

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply