Dropzonejs 问题 - Dragleave 未按预期工作

Question

我正在研究 Dropzonejs 启用拖放选项的多文件上传。

我面临以下问题。

我已成功实施 dragenter 以检测拖动到拖放区并显示不同的预览 div(.dz-drag)。拖动离开后，应再次显示默认预览。没有定义 dragleave 函数，dragenter 函数工作正常。
关于拖动离开，插件没有按预期响应。看起来好像拖动离开覆盖了 dragenter 功能。

这是我的代码

HTML

<div id="preview" class="dropzone">
   <div class="dz-drag">
       <h2><i class="glyphicon glyphicon-arrow-down"></i></h2>
       <p>Drop files here</p>
   </div>
   <div class="dz-preview default"><i class="glyphicon glyphicon-plus"></i>           
   </div>
</div>

JS

    var myDropzone = new Dropzone(document.body, {// Make the whole body a dropzone
        url: "insert-status.php", // Set the url
        method: 'POST',
        paramName: 'image',
        parallelUploads: 1,
        addRemoveLinks: true,
        uploadMultiple: false,
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        autoQueue: false, // Make sure the files aren't queued until manually added
        dictResponseError: "Sorry! Something went wrong. Please try again.",
        previewsContainer: "#preview", // Define the container to display the previews
        clickable: ".file-click, #preview", //Define all the Clickable elements for this Dropzone
        acceptedFiles: "image/jpeg, image/jpg, image/gif, image/png, image/bmp, video/mp4, video/avi, video/mvi, video/3gp",

        dragenter: function(file) {
            $('.dz-preview').hide();
            $('.dz-drag').show();
            $('.preview-cont').addClass('added'); //Show Preview Container
        },
        dragleave: function(file) {
            alert('leave');
            $('.dz-drag').hide();
            $('.dz-preview').show();
            $('.preview-cont').removeClass('added'); //Show Preview Container
            $('.preview-cont').removeClass('added'); //Hide Preview Container - Not working
        },
        drop: function(file) {
            $('.dz-preview').show();
            $('.dz-drag').hide();
        }

CSS

   .preview-cont:not(.added){
display:none;
}

.dz-preview.default{
    width: 80px;
    margin:5px 3px;
    border: 0.17em dashed rgba(0,0,0,0.15);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}
.dz-preview.default .glyphicon{
    position:absolute;
    margin-top:35%;
    margin-left:40%;
    color: rgba(0,0,0,0.15);
    font-weight:500;
    font-size:150%;
}

.dz-preview.default:hover{
    border-color:rgba(0,0,0,0.23);
}
.dz-preview.default:hover > .glyphicon{
    color:rgba(0,0,0,0.23);
}

.dz-drag{
    display:none;
    width:100%;
    background:rgba(255,255,255,0.7);
    text-align:center;
    border:2px dashed rgba(0,0,0,0.2);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}

此外，我的要求需要知道我的放置区中是否已经存在文件，无论是 ADDED、QUEUED、UPLOADING 还是任何其他文件状态。除了使用内置的 getFilesWithStatus 函数之外，有没有一种方法可以检测文件的存在？我的意图是通过单个函数调用进行检测。
我已经通过 disabling/hiding 可点击链接和按钮处理了 maxfilesreached 函数。现在，当最后添加的文件被删除时，我想重新启用所有禁用的链接。我还没有找到执行此操作的方法。

Answer 1

试试 dragover 和 dragleave
见1.
不确定 "detected file presence" 是什么意思，但是掉落事件有帮助吗？
我使用了removedfile事件，我只是统计页面上有多少个预览模板。如果为 0，则删除最后一个文件。

Dropzonejs 问题 - Dragleave 未按预期工作

Dropzonejs issues - Dragleave not working as expected

jquery

twitter-bootstrap

dropzone.js