Question

我有一个网页，其中包含我用作dropzone的<main/> div。这个div覆盖了大部分屏幕，我不希望上传者修改这个特定div的CSS。

当文件被拖到页面上时，我想以交互方式显示帮助页面。该帮助页面是一个隐藏在页面上方的div。我想指示精细上传器的DragAndDrop模块使用<main/>作为dropzone，并控制（通过添加CSS类，或者更好的一些我的Javascript代码）另一个隐藏的div。

目前代码如下：

var dragAndDropModule = new qq.DragAndDrop({
    dropZoneElements: document.getElementsByTagName('main'),
    classes: {
        dropActive: "cssClassToAddToDropZoneOnEnter"
    },
    callbacks: {
        processingDroppedFilesComplete: function(files, dropTarget) {
            fineUploaderBasicInstance.addFiles(files);
        }
    }
});

其中fineUploaderBasicInstance是qq.s3.FineUploaderBasic的实例。

我尝试在dropZoneElements中添加第二项（隐藏的div）;但是这个方法有两个问题：首先CSS代码在我的情况下变得非常混乱，并且display:block被添加到Chrome上的<main/>（https://github.com/FineUploader/fine-uploader/blob/master/client/js/dnd.js#L251？），这打破了我的布局 - 再次在这里<main/>应该只是dropzone，而不是正在修改的元素。

有没有办法改变DragAndDrop模块的行为来控制单独的div（例如在dragover上进行回调）？

Answer 1

不需要对help块进行JS控制。使用tilde / squiggle（~）选择器后，CSS可以很容易地完成工作（如果它不在主要的旁边。如果是，请使用adjacent（ +）选择器）：

HTML代码：

<div id="main">... your code ...</div>
<div id="help">... help notes ...</div>

CSS代码（如果帮助div位于main旁边，如上所述，请使用+，否则请使用~）：

main.cssClassToAddToDropZoneOnEnter + #help {
    display: block;
    /* and other css properties when shown, maybe a transition effect or something */
}

Fine-uploader拖放：不同的dropzone和帮助div

1 个答案: