백본보기에서 드롭 이벤트가 실행되지 않습니다.

Question

행복하게 코딩하고 백본을 배울 때 # ~ @@! 일어난!

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; 

}); 

내 드래그 & 드롭이 작동되고 더 많은 기능의 갑자기 많은 :이 이벤트를 처리하는 등 내 백본보기에서

내가 모델에서 내 견해를 분리하는 데 필요한 사용

, (이미지 파일이 브라우저에서 열렸습니다.)

DOM 준비가되어 있고 때때로 발생합니다 (DOM 준비가 완료되면 코드가 평가되는 경우) 하지만 클릭 이벤트가 계속 발생하며 드래그 이벤트도 발생합니다 ...

일부 오타가 될 수 있습니까 ?? 내가 세드릭 이해할 수없는 약간 미친거야 좋은 돌아가서 확인 커밋 기억할 수 : S

는 몇 가지 가능한 답 :

을 보여줄 수 있다면 모든 주셔서 감사합니다

예 : - 어떻게하면 드롭 이벤트를 디버그 할 수 있습니까 ??? - 내보기에 일정이 묶여 있는지 어떻게 알 수 있습니까?

Answer 1

너는 미친 사람이 아니다. Google 크롬의 최근 업데이트로 인해 NodeCellar 자습서를 비롯하여 많은 사이트에서 브라우저 드롭 인 기능이 중단되었습니다. 이것은 매우 쉽게 고칠 수 있습니다. 나를 위해

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

이 JSFiddle demo 작업 (크롬 24.0.1312.52) : 크롬은 이제 dragover 이벤트에 대한 기본 동작을 방지하기 위해 당신이 필요합니다. 이 문제에 대해서는 Chromium issue #168387입니다. .

Answer 2

당신은 백본에보기에이 코드를 추가 할 수 있습니다 또한

events: { 
.... 
.... 
    "drop #picture" : "dropHandler", 
    "dragover #picture" : "dragOver" 
}, 


dropHandler: function (event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
.... 
.... 
}, 

dragOver: function (event) { 
    event.preventDefault(); 
}