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

});

我在这里做的是在fineUploaderDnd上实例化一个新的document.body实例（您可能希望将此元素更改为其他内容）。我给它一个dropActive类'qq-upload-drop-area'这是使用Fine Uploader UI时删除区域的默认类（请注意，您可以将任何类放在此处 - - 理想情况下，当它处于活动状态时，它将匹配应用于原始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>

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

1 个答案: