HTML/CSS - Наложение полной страницы на перетаскивание

У меня возникли проблемы с созданием полноэкранного наложения, чтобы распознать перетаскивание + падение. Если пользователь перетаскивает файл со своего компьютера по странице, его загрузка в любом месте приведет к загрузке. Однако у меня возникли проблемы с получением полного наложения страниц, которое распознается при удалении файла и не блокирует элементы наведения на странице. Вот мой текущий код.HTML/CSS - Наложение полной страницы на перетаскивание

HTML:

<div id = 'dropZone'></div>

CSS:

#dropZone 
{ 
    background: gray; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
    opacity: .8; 
}

JS, распознаваемые падение:

var dropZone = document.getElementById('dropZone'); 
dropZone.addEventListener('dragover', handleDragOver, false); 
dropZone.addEventListener('drop', handleFileSelect, false);

http://jsfiddle.net/V37cE/

источник

2012-09-13 Lukas

Удалите пробелы между символами '=' в вашем html. – Daedalus

Можете ли вы уточнить, что вы имеете в виду: «... когда файл отбрасывается и не блокирует элементы наведения на странице». –

Мне нужен div для распознавания, когда файл отбрасывается на страницу. Если div установлен выше всех других элементов, он действует как щит, поэтому никакие эффекты не работают (зависание и щелчок). – Lukas

-1

Я решил проблему, добавив идентификатор зоны выпадения в тег, который охватывает всю страницу.

источник

2012-09-14 00:20:30 Lukas

вы где-то не хватает тела? – cghislai

Это должно помочь. Вот great tutorial по файлу HTML5 Drag & Drop API. А вот w3.org documentation для API.

источник

2012-09-13 04:20:37

для такого наложения, будет отображаться только при перемещении содержимого, вы должны обращаться с DragEnter и DragLeave события на различных элементах:

<body> 
<div>...</div> 
<div id="myDropZone" ondragenter="handleDragEnter" style="z-index: 1"> 

    <div id="myDropOverlay" ondragleave="handleDragLeave" onDrop="handleDrop" hidden style="z-index: 2"> 
    Drop your file here 
    </div> 

    <div> 
    content covered by the drop zone overlay while dragging 
    </div> 
</div> 
</body>

Вы затем скрыть/показать накладку в ЯШАХ:

function handleDragEnter(event) { 
    showMyDropZoneOverlay(); 
} 
function handleDragLeave(event) { 
    hideMyDropZoneOverlay(); 
} 
function handleDrop(event) { 
    ... 
}

источник

2016-05-26 20:04:07 cghislai

HTML/CSS - Наложение полной страницы на перетаскивание

ответ

Смежные вопросы