Dropzonejs 问题 - Dragleave 未按预期工作答案

【问题标题】：Dropzonejs issues - Dragleave not working as expectedDropzonejs 问题 - Dragleave 未按预期工作
【发布时间】：2015-05-20 08:59:17
【问题描述】：

我正在使用Dropzonejs 进行多文件上传，并启用拖放选项。

我面临以下问题。

我已成功实施 dragenter 以检测拖入拖放区并显示不同的预览 div(.dz-drag)。拖动离开后，应再次显示默认预览。如果没有定义 dragleave 函数，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>

    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;
}

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

【问题讨论】：

标签： jquery twitter-bootstrap dropzone.js

【解决方案1】：

尝试dragover和dragleave
见 1。
不确定您所说的“检测到文件存在”是什么意思，但 drop 事件有帮助吗？
我使用了removedfile 事件，我只计算页面上有多少预览模板。如果为 0，则删除最后一个文件。

【讨论】：