programing

크롬에서 낙하 이벤트가 발생하지 않음

oldcodes 2023. 10. 16. 22:03
반응형

크롬에서 낙하 이벤트가 발생하지 않음

예상했던 드롭 이벤트가 발생하지 않는 것 같습니다.

드래그하는 요소가 대상 요소 위에서 해제될 때 드롭 이벤트가 발생한다고 가정하지만, 이 경우는 아닌 것 같습니다.

내가 뭘 잘못 알고 있는 거지?

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이벤트성의

드롭 이벤트가 발생하려면 오버 이벤트 중에 dropEffect를 할당해야 합니다. 그렇지 않으면 온드롭 이벤트가 트리거되지 않습니다.

$('.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.

이것은 실제적인 대답이 아니라 저처럼 일관성에 대한 규율이 부족한 사람들을 위한 것입니다.드랍은 크롬으로 나를 위해 발사되지 않았습니다.effectAllowed내가 설정한 효과는dropEffect. 하지만 사파리에서는 효과가 있었습니다.다음과 같이 설정해야 합니다.

ev.dataTransfer.effectAllowed = 'move';

아니면.effectAllowed로 설정할 수 있습니다all, 가능한 한 구체성을 유지하고 싶어요

낙하 효과가 이동하는 경우:

ev.dataTransfer.dropEffect = 'move';

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

반응형