데스크톱에서 브라우저로 파일을 드래그 할 때 트리거되는 Javascript 이벤트는 무엇입니까

Question

Gmail과 유사한 파일 업로 드로 시스템을 구현하려고합니다. 나는 이미 모든 Fileupload/AJAX 문제를 완료했으며 완벽하게 작동합니다. 내가 가진 유일한 문제는 사용자 피드백입니다.

예를 들어 .. Gmail에서 파일을 브라우저로 드래그하면 (IE9 이상 사용자라고 가정) 팝업 창이 나타나 파일을 놓을 수 있습니다. 프레임 워크 (Jquery라고 가정 해 봅시다)에 포착되어 드롭 영역에서 멋진 애니메이션을 만들 수 있습니다.

내 질문은 간단합니다.이 작업을 수행하기 위해 어떤 이벤트를 캡처해야합니까? 어떤 아이디어? 내가 잘못하고 있니?

Answer 1

메인 이벤트는 단지 drop입니다.

dragenter 및 dragleave도 처리해야합니다. 그렇지 않으면 삭제 조치로 인해 삭제 된 파일이로드됩니다. 선택적으로 dragover을 볼 수도 있습니다. dragenter 및 dragleave 핸들러 물건이 그것으로 드래그 될 때 단지 드롭 존의 모양이 변경되어이 경우

var $dz = $('#dropzone'); 
$dz.on({ 
    dragenter: dragenter, 
    dragleave: dragleave, 
    dragover: false, 
    drop: drop 
}); 

function dragenter() { 
    $dz.addClass('active'); 
}; 

function dragleave() { 
    $dz.removeClass('active'); 
}; 

function drop(e) { 
    var dt = e.originalEvent.dataTransfer; 
    if (dt) { 
     var files = dt.files; 
     ... 
    } 
    $dz.removeClass('active'); 
}; 

:

나는과 같이,이 핸들러를 등록하는 코드가 있습니다.

Answer 2

이것은 drop이며, 이벤트 객체에서 필요한 속성은 originalEvent 속성에 있습니다. 이 드롭 이벤트가 발생하는 내가 정확히 기억한다면

$(element).on("drop",function(e){ 
    console.log(e.originalEvent) 
}); 

당신은 또한 dragenter에 바인딩을 해제와 같은 요소에 dragleave해야합니다.

$(element).on("dragenter dragleave", false);