`drop` 이벤트 이후 리디렉션을 중지하는 방법은 무엇입니까?

Question

Firefox에서 파일을 div으로 삭제 한 후 웹 페이지가이 파일로 리디렉션됩니다. drop 처리기에서 jQuery의 e.preventDefault()을 사용하여 전파를 중지하려고 시도했지만 실패했습니다.

을 참조하십시오. 파일을 #test으로 보내면 웹 페이지가 리디렉션되지 않지만 #test1으로 삭제됩니다. 이유를 알고 싶습니다. dragenter, dragover, dragleave 및 drop에 항상 처리기를 바인딩하여 drop 이후에 전파되지 않도록해야합니까?

갱신 :

나는 html5doctor에 대한 몇 가지 팁을 발견

우리가이 요소에서 삭제할 수 있습니다 브라우저를 말하자면, 우리가해야 할 모든 이 DragOver 이벤트를 취소 할 수 있습니다. 그러나 IE가 다르게 동작하므로 은 dragenter 이벤트에 대해 동일한 작업을 수행해야합니다.

그리고 모질라 claims는 : 에 사용되는 dragenter 및 dragover 이벤트에 대한

청취자는, 즉, 항목을 드래그 장소 삭제 될 수 있습니다 유효한 드롭 목표를 나타냅니다.

하지만 파이어 폭스에 this demo을 테스트 #test 작품과 #test1하지 않는, 모질라가 실수를 한 것, 그리고 html5doctor은 맞다 : 파이어 폭스는 drop 작동하도록 dragover이 필요합니다.

Answer 1

ondragover 이벤트는 ondrop 이벤트를 트리거 할 수 있도록 구글 크롬 및 사파리 취소 될 필요가있다.

Answer 2

나는 onDragOver를 취소하는 것만으로는 충분하지 않았 음을 알았지 만 onDragDrop 및 onDragLeave도 취소해야했습니다. 다음, 나는 사용자가 무엇을하고 있는지 행동을 나타내는 기록을 보여주는 해요 : 다음

<script type="text/javascript"> 

    var handledragleave = function handleDragLeave(e) { 
      console.log("Floating away. Do code here when float away happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragdrop = function handleDrop(e) { 
      console.log("Dropping. Do code here when drop happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragover = function handleDragOver(e) { 
      console.log("Floating over. Do code here when float over happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    cancelDefaultBehavior(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      return false; 
    } 

$('.your-element-being-dragged-to') 
    .on('DragLeave', handledragleave) 
    .on('DragDrop', handledragdrop) 
    .on('DragOver', handledragover); 

</script> 

그리고 당신의 요소 ...

<p class="your-element-being-dragged-to">Drag something here!</p>