骨干丢弃事件不起作用答案

【问题标题】：Backbone Drop Event Not Working骨干丢弃事件不起作用
【发布时间】：2013-08-15 00:43:54
【问题描述】：

我有一个带有两个主干视图的仪表板。一个视图包含各种拖放区，另一个包含draggable="true" 的项目。但是，这些拖放区不会在 drop 事件上触发，而是在 dragenter 和 dragleave 上触发。为什么 drop 事件没有触发？

注意：正在呈现的模板包含.item-drop-zone div 元素

包含拖放区的视图：

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

});

【问题讨论】：

尝试使用'drop .item-drop-zone'，因为drop 事件会在拖动操作结束时发生拖放的元素上触发。
是的，我开始使用它，但它仍然没有触发。不过，我会编辑此问题以反映您的建议。
this answer 有帮助吗？
不，我最近一个小时一直在研究它：/

标签： javascript jquery backbone.js

【解决方案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。

来自链接

在dragenter 和dragover 期间调用preventDefault 方法事件将指示该位置允许drop。

【讨论】：

很好的答案。谢谢你，凯利。