Drop event does not fire in projection mode

Question

I was happy to code and train the highways when it is # ~ @@! It happened!

I use the requirement to separate my views from models, etc.

In my Highway view, I handle these 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 worked, and suddenly, when a lot of functionality was added, it stopped working: (the image file that it opened in the browser.

I read that the DOM is ready, and that this can happen sometimes (if the code gets evaluated when the DOM is ready) , but the click events still fire, as well as the dragenter event ....

Could it be a typo? I'm a little crazy, I can’t understand what’s going on, and I can’t remember a good fix, to go back and check: S

Thanks to everyone if you can show some possible answers :)

For example: - how can I debug the drop event? - how can I find out if an event is related to my performance?

Answer 1

You are not crazy. A recent update in Google Chrome disrupted browser casting for many sites, including the NodeCellar tutorial, it seems. However, this is pretty easy to fix. In Chrome, you now need 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(); }); 

This JSFiddle demo works for me (Chrome 24.0.1312.52). Here is Chromium issue # 168387 about this issue.

And pull the request to fix it in NodeCellar .

Answer 2

You can use Backbone to view this code:

 events: { .... .... "drop #picture" : "dropHandler", "dragover #picture" : "dragOver" }, dropHandler: function (event) { event.stopPropagation(); event.preventDefault(); .... .... }, dragOver: function (event) { event.preventDefault(); }