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;
    }

});

Answer 1

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.