我有一个包含两个主干 View 的仪表板。一个 View 包含各种拖放区,另一个包含 draggable="true"
的项目。但是,这些拖放区不会在 drop
事件上触发,但会在 dragenter
和 dragleave
上触发。为什么拖放事件没有触发?
注意:正在呈现的模板包含 .item-drop-zone
div 元素
包含拖放区的 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;
}
});
最佳答案
您必须告诉浏览器该元素是放置目标:
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
。
来自链接
Calling the
preventDefault
method during both adragenter
anddragover
event will indicate that adrop
is allowed at that location.
关于javascript - Backbone 丢弃事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18235759/