Chrome에서 실행되지 않는 드롭 이벤트

Chrome에서 실행되지 않는 드롭 이벤트

---

예상 할 때 드롭 이벤트가 트리거되지 않는 것 같습니다.

드래그되는 요소가 대상 요소 위에 놓일 때 드롭 이벤트가 발생한다고 가정하지만 이는 그렇지 않은 것 같습니다.

내가 무엇을 오해하고 있습니까?

http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})

---

드롭 이벤트가 div 요소에서 발생하도록하려면 ondragenter및 ondragover이벤트를 취소해야 합니다. jquery 및 제공된 코드 사용 ...

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(event){
    event.preventDefault();
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})
$('.drop').on('dragover',function(event){
    event.preventDefault();
})

자세한 내용 은 MDN 페이지를 확인 하세요 .

---

이벤트 event.preventDefault()에 참여하는 것만으로도 벗어날 수 있습니다 dragover. 이렇게하면 drop이벤트가 시작됩니다.

---

drop 이벤트가 발생하려면 over 이벤트 중에 dropEffect를 할당해야합니다. 그렇지 않으면 ondrop 이벤트가 트리거되지 않습니다.

$('.drop').on('dragover',function(event){
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';  // required to enable drop on DIV
})
// Value for dropEffect can be one of: move, copy, link or none
// The mouse icon + behavior will change accordingly.

참고 URL : https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome