我的拖放功能不会被触发

Question

1. 我尝试在javascrit中拖拽但是我无法触发我的阻力 掉落功能。我把这些功能称为文件就绪。但是我可以 仅在页面加载时调用。我不能触发我的活动。谢谢..

这是我的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

首先尝试向div添加内容（例如不间断空格），因为它现在的高度为0px。它被触发的可能性不大。 （样式为红色背景，因此可以看到允许掉落的地方）。我没有在代码中看到任何错误。

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

这是JSFiddle，显示代码按原样运行。

https://jsfiddle.net/6rw6y9Lf/