Сделайте весь DIV прозрачной зоной перетаскивания с помощью тонкого загрузчика

У меня есть элемент <article> в моем веб-приложении, который заполняется контентом с помощью кода Javascript. Я хотел бы добавить возможность перетаскивания файлов по видимой в данный момент части этого элемента <article> (поскольку у него есть полоса прокрутки) и передать эти файлы на S3.

Я тестировал Fine-uploader с предоставленным файлом test.html. Моя подпись кода на стороне сервера работает, и я получаю файлы в свои корзины S3.

Мой вопрос связан с пользовательским интерфейсом: как мне добавить возможность перетаскивания файлов поверх <article> и отображать пользовательский интерфейс только тогда, когда файл был удален, чтобы подтвердить загрузку, не перемещая весь мой HTML-код в шаблон тонкого загрузчика? Я попытался добавить <div> над страницей, но это, очевидно, помешало мне выделить текст в элементе <article>, расположенном ниже…

Я чувствую, что упускаю что-то очевидное. По сути, мой вопрос похож на решение dropzone.js здесь: https://github.com/enyo/dropzone/wiki/Make-the-whole-body-a-dropzone


person Mathieu Legrand    schedule 08.10.2014    source источник


Ответы (1)


Мы не предоставляем никаких файлов с именем "test.html".

Несмотря на это, вы можете в любое время добавить любое количество зон сброса с помощью . метод addExtraDropzone API.

Например:

uploader.addExtraDropzone(document.getElementsByTagName('article'));
person Ray Nicholus    schedule 08.10.2014
comment
Это не сработало, но в конце концов привело меня к примеру внизу этой страницы: docs.fineuploader.com/features/drag-and-drop.html, который делает то, что мне нужно (по крайней мере, для моей первой итерации). внизу страницы docs.fineuploader.com/branch/master/ быстрый старт/ - person Mathieu Legrand; 08.10.2014
comment
По большей части нет веских причин использовать jquery-версию Fine Uploader. Вот почему я включил пример без jquery. - person Ray Nicholus; 08.10.2014