私のドラッグドロップ機能は起動されません

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/