骨干掉線事件不起作用

Question

我有一個帶有兩個主視圖的儀表板。 一個視圖包含各種放置區，另一個視圖包含draggable="true" 。 但是，這些放置區不會在drop事件上觸發， dragleave在dragenter和dragleave上dragleave 。 為什么掉落事件不觸發？

注意：正在渲染的模板包含.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;
    }

});

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被允許在該位置。