내 드래그 드롭 기능이 실행되지 않습니다.

Question

1. javascrit에서 드래그 드롭을 시도하지만 내 드래그를 트리거 할 수 없습니다. 드롭 기능. 나는이 함수를 문서에서 준비한다. 하지만 페이지가로드 될 때만 호출 할 수 있습니다. İ 내 이벤트를 유발할 수 없습니다. 이 때문에 먼저 DIV에 (예를 들어 비 분리 공백)

이 내 HTML을

<div id="dropZone"></div> 

입니다 .. 주셔서 감사합니다이 내 기능

$(document).ready(function() { 
     var dropZone = document.getElementById('dropZone'); 
     if (dropZone) { 
      dropZone.addEventListener('dragover', handleDragOver, false); 
      dropZone.addEventListener('drop', handleFileSelect, false); 
      dropZone.addEventListener('dragleave', handleDragLeave, false); 
     } 
    }); 
    function handleFileSelect(evt) { 
     evt.stopPropagation(); 
     evt.preventDefault(); 

     var files = evt.dataTransfer.files; // FileList object. 
     uploadTheFile(evt,"new",files); 
    } 

    function handleDragOver(evt) { 
     evt.stopPropagation(); 
     evt.preventDefault(); 
     evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
     var $dragOver = $("#dropZone"); 
     $dragOver.removeClass("article-content-add-new-images"); 
     $dragOver.addClass("article-content-add-new-images-drag"); 

    } 
    function handleDragLeave(evt) { 
     evt.stopPropagation(); 
     evt.preventDefault(); 

     var $dragLeave = $("#dropZone"); 
     $dragLeave.removeClass("article-content-add-new-images-drag"); 
     $dragLeave.addClass("article-content-add-new-images"); 

    } 

Answer 1

한번에 추가하는 내용입니다 0px의 높이가되었습니다. 별로 기회가 발동되지 않습니다. (스타일이 적용된 빨간색 배경이므로 상품이 허용되는 곳에서 볼 수 있습니다). 코드에 오류가 표시되지 않습니다.

<div id="dropZone" style="background:red;">&nbsp;</div> 

다음은 코드가 그대로 작동하는 JSFiddle입니다.

https://jsfiddle.net/6rw6y9Lf/