Fine-uploader drag-and-drop: distinct dropzone and help div

Question

I have a webpage that contains a <main/> div that I am using as a dropzone. That div is covering most of the screen, and I do not want fine-uploader to modify the CSS of this specific div.

When a file is dragged onto the page, I would like to interactively display an help page. That help page is an hidden div floating above the page. I'd like to instruct the DragAndDrop module of fine-uploader to use <main/> as a dropzone, and to control (either by adding a CSS class, or better some of my Javascript code) the other hidden div.

For now the code looks like:

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

where fineUploaderBasicInstance is an instance of qq.s3.FineUploaderBasic.

I tried adding a second item into dropZoneElements (the hidden div); but the approach has two issues: first the CSS code gets very messy in my case, and display:block is added to <main/> (https://github.com/FineUploader/fine-uploader/blob/master/client/js/dnd.js#L251 ?) on Chrome, which breaks my layout – again here <main/> should only be the dropzone, not an element that is being modified.

Is there a way to change the behaviour of the DragAndDrop module to control a separate div (for example by having a callback on dragover)?

Answer 1

There's no need for JS control over the help block. CSS can easily do the job as it follows using the tilde / squiggle (~) selector (if it's not exactly next to main. In case it is, use the adjacent (+) selector) :

HTML Code:

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

---

CSS Code (if help div is next to main, as stated above, use +, if not, use ~):

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