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

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

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

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

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.

이것은 실제적인 대답은 아니지만 일관성에 대한 규율이 ​​부족한 저와 같은 사람들에게 있습니다. Drop은 effectAllowed내가 설정 한 효과 가 없었을 때 크롬에서 나를 위해 발사하지 않았습니다 dropEffect. 그러나 Safari에서는 작동했습니다. 다음과 같이 설정해야합니다.

ev.dataTransfer.effectAllowed = 'move';

또는 effectAllowed로 설정할 수 all있지만 가능한 한 특정 성을 유지하는 것이 좋습니다.

드롭 효과가 이동 인 경우 :

ev.dataTransfer.dropEffect = 'move';