Backbone Drop Событие не работает

Question

У меня есть панель инструментов с двумя основными видами. Один вид содержит множество зон сброса, а другой содержит элементы, которые являются draggable="true". Однако эти зоны сброса не стреляют по drop событиям, но они стреляют по dragenter и dragleave. Почему событие капли не срабатывает?

Примечание: Шаблон, который визуализируется содержит .item-drop-zone элементы Div

The View, содержащий рабочие зоны:

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

Вы должны сообщить браузеру, что элемент является целью снижения :

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

См. https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations#droptargets для получения дополнительной информации о падении целей. Вам нужны как dragenter, так и dragover события. Поскольку вы уже делаете dragenter, вы можете просто добавить dragover.

Из ссылки

Вызов метода preventDefault во время как в случае dragenter и dragover укажет, что drop разрешено в этом месте.