Fine Uploader以及如何在拖放过程中突出显示额外的拖放区域？

Question

我已成功为 Fine Uploader 添加了一个额外的拖放区，效果很好。

但是，当开始拖放操作时，我希望能够以与突出显示默认放置区域相同的方式突出显示额外放置区域。

我尝试将 qq-upload-drop-area 类添加到我的额外放置区域，但当然它会将所有内容都涂成红色，无论拖放是否正在进行。

任何关于如何正确实现此功能的指针将不胜感激。

Answer 1

您可以使用the standalone drag and drop module。确保为 classes.dropActive 选项添加一个值，该值与添加到活动的原始拖放元素的类相匹配。

$(document).ready(function(){

    $('#fineuploader-traditional').fineUploader({
        // ...
    });

    $(document.body).fineUploaderDnd({
        classes: {
            dropActive: 'qq-upload-drop-area'
        }
    })
    .on('processingDroppedFiles', function(event){
        console.log('Processing');
    })
    .on('processingDroppedFilesComplete', function (event, files, target){
        $("#fineuploader-traditional").fineUploader('addFiles', files);
    });

});

我在这里做的是在document.body 上实例化一个新的fineUploaderDnd 实例（您可能希望将此元素更改为其他元素）。我给它一个 dropActive 类 'qq-upload-drop-area' 这是使用 Fine Uploader UI 时放置区域的默认类（请注意，您可以将 any 类放在这里 - 理想情况下它会匹配应用到原始 dropzone 的类（当它处于活动状态时，以便两个 dropzone 匹配）。此类表示当一个或多个文件被拖到拖放区时应用到拖放区的样式。

'processingDroppedFilesComplete' 事件允许我将接收到的文件添加到 Fine Uploader 的一个实例——在那里它们将被验证并最终上传。

更新

如果您希望任何放置区的内容在项目进入放置区之前不可见，只需确保放置区容器上存在qq-hide-dropzone 属性即可。

<div id="extra-dropzone" qq-hide-dropzone></div>

更新 2

另一个可能的选项是使用dragAndDrop.extraDropzones 选项，它会自动执行很多操作。

$(document).ready(function(){

    $('#fineuploader-traditional').fineUploader({
        // ...
        dragAndDrop: {
            extraDropzones: [ $("#extra-dropzone") ]
        },
    });

<div id="extra-dropzone" qq-hide-dropzone>
    <h2>Drop files here</h2>
</div>