drop事件不是射击骨干视图 [英] drop event not firing on backbone view

问题描述

我愉快地编码和学习骨干，当此＃〜@@！发生了！

I was happily coding and learning backbone when this #~@@! happened!

我需要用我的意见，从模型中分离出来，等等。

I use require to separate my views from models, etc.

在我的骨干认为我处理这个事件：

In my Backbone view I handle this events:

define(['...'],function(...) {

var DishView = Backbone.View.extend({
    template: _.template(dish),
    tagName: 'div',
    id: 'dish',

    initialize: function() {
        console.log('initializing dishView');
        this.model.on('change', this.render, this);
    },

    render: function(){
        console.log('rendering dishView');
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    events: {
        'click #relations-menu .newItem': 'launch_modal_relations',
        'click #delete' : 'delete_dish',
        'click #save-basic-changes': 'save_basic',
        'drop #dropPicture' : 'dropHandler',
        'dragenter #dropPicture' : 'alertMe'
    },

    alertMe: function () {
        console.log('clicked on image');
    },

    delete_dish: function () {
        this.model.deleteMyself();
        Backbone.history.navigate('/', {trigger: true});
    },

    save_basic: function (event) {
        var name = $('#inputName').val();
        var description = $('#inputDescription').val();
        var price = $('#inputPrice').val();
        this.model.updateBasicInfo(name, description, price);
    },

    dropHandler: function(event) {
        event.preventDefault();
        console.log('drop received');
        event.stopPropagation();

        var e = event.originalEvent;
        e.dataTransfer.dropEffect = 'copy';
        this.pictureFile = e.dataTransfer.files[0];
            ...

    },
return DishView;

});

我的拖放放大器;下降是工作，突然当加入了很多更多的功能，它停止工作:(图像文件，它在浏览器中打开

My drag&drop was working and suddenly when a lot of more functionality was added, it stopped working :( the image file it's opened in the browser.

我读过有关的DOM准备好，而这有时会发生（如果在DOM准备好了code被评估）的但点击事件仍然被解雇，也DragEnter事件.. ..

I've read about the DOM being ready and that this can happen sometimes (if the code gets evaluated when the DOM is ready) but the click events still get fired, also the dragenter event....

难道这是一些错字？我会有点疯狂我不明白怎么回事，不能记好承诺回去查：•

Could this be some typo?? I'm going a little bit crazy I can't understand whats going on and can't remember a good commit to go back and check :S

感谢大家，如果你能展示一些可能的答案:)

Thank you all if you can show some possible answers :)

例如：
  - 我该如何调试drop事件？
  - 我怎么能知道，如果一个事件被绑定到我的看法

For example: - how can I debug the drop event??? - how can I know if an event is tied to my view?

推荐答案

您是不是疯了。谷歌浏览器最近更新打破了下拉到浏览器的功能对于很多网站，包括，看来，在NodeCellar教程。
这是很容易可以解决的，但。现在的Chrome需要你prevent为的dragover 事件的默认动作：

You're not crazy. A recent update in Google Chrome broke the drop-into-browser feature for a lot of sites, including, it seems, the NodeCellar tutorial. This is quite easily fixable, though. Chrome now requires you to prevent the default action for the dragover event:

$('div').on('drop',function(e){
    e.originalEvent.stopPropagation();
    e.originalEvent.preventDefault();
    $(this).html('A file was dropped!');
}).on('dragover', function (e) {
  e.preventDefault();
});

这的jsfiddle演示给我作品（铬24.0.1312.52）。这里的铬问题＃168387 ，这个问题。

This JSFiddle demo works for me (Chrome 24.0.1312.52). Here's the Chromium issue #168387, about this problem.

和一个拉请求NodeCellar 来解决这个问题。

And a pull request to fix this in NodeCellar.

这篇关于drop事件不是射击骨干视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！