Backbone Drop Event Not Working

Question

I have a dashboard with two backbone Views. One view contains a variety of drop zones, the other contains items that are draggable="true". However, these drop zones are not firing on drop events, yet they are firing on dragenter and dragleave. Why is the drop event not firing?

Note: The template that is being rendered contains the .item-drop-zone div elements

The View containing the Drop Zones:

Shopperater.Views.ModuleMedleyView = Backbone.View.extend({

    tagName: "div",
    className: "row",
    template: JST['modules/medley'],

    initialize: function() {
        _.bindAll(this);
    },

    events: {
        'dragenter .item-drop-zone' : 'highlightDropZone',
        'dragleave .item-drop-zone' : 'unhighlightDropZone',
        'drop .item-drop-zone' : 'dropTest'
    },

    dropTest: function(e) {
        console.log("dropped!")
    },

    highlightDropZone: function(e) {
        e.preventDefault();
        $(e.currentTarget).addClass('item-drop-zone-highlight')
    },

    unhighlightDropZone: function(e) {
        $(e.currentTarget).removeClass('item-drop-zone-highlight')
    },

    render: function () {
        this.$el.html(this.template({ }));
        return this;
    }

});

Try with 'drop .item-drop-zone' because the drop event is fired on the element where the drop occurred at the end of the drag operation. — nemesv
Yes, I started with that and it still doesn't fire. I'll edit this question to reflect your suggestion though. — ac360

kalley kalley · Accepted Answer · 2013-08-14T16:37:57

You have to tell the browser that the element is a drop target:

events: {
    'dragenter .item-drop-zone' : 'highlightDropZone',
    'dragleave .item-drop-zone' : 'unhighlightDropZone',
    'drop .item-drop-zone' : 'dropTest',
    'dragover .item-drop-zone': function(ev) {
        ev.preventDefault();
    }
}

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#droptargets for more information about drop targets. You need both dragenter and dragover events. Since you are already doing the dragenter, you can just add the dragover.

From the link

Calling the preventDefault method during both a dragenter and dragover event will indicate that a drop is allowed at that location.

Backbone Drop Event Not Working

1 Answers