Перетаскивание-объект DataTransfer

Я создаю простой drag n ' drop uploader, и мне интересно, почему я не вижу файл(Ы), который я бросаю, когда я console.log(e) (DragEvent) и посмотрите на DragEvent.dataTransfer.files он отображается пустым, но... если я ... --3--> он покажет отброшенные файлы.

//код

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", init);
function init(){
    var dropbox = document.getElementById('dropbox');
    dropbox.addEventListener('dragover', drag.over);
    dropbox.addEventListener('drop', drag.drop);
}
var drag = {
    "over": function(e){
        e.preventDefault();
    },
    "drop": function(e){
        e.preventDefault();
        console.log(e); //NO FILES SHOWN
        console.log(e.dataTransfer.files); //FILES in FileList Object
    }   
};  
</script>
<style>
body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
}
#dropbox{
    height: 400px;
    width: 400px;
    align-self: center;
    background-color: #0089C4;
    border-radius: .3em;
    border: 1px dashed black;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
</style>
</head>
<body>
    <div id="dropbox"></div>    
</body> 
</html>
8
drag drag-and-drop html5 javascript

1 ответов

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

  • On dragstart событие это читать/писать режим.
  • On drop событие, в только для чтения режим.

  • и на всех других мероприятиях, это в защищенный режим.

    защищенный режим определяется следующим образом:

защищенный режим

для всех остальных событий. Форматы и виды в хранилище данных drag список элементов, представляющих перетаскиваемые данные, можно перечислить, но сами данные недоступны, и никакие новые данные не могут быть добавлены.

смотрите здесь: https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

это означает, что при доступе к dataTransfer объект в вашей консоли, который не включен drop или dragstart событие, в защищенный режим, предотвращающий доступ к данным.

вы можете просмотреть fileList потому что ты журнал fileList on drop событие, когда dataTransfer читаем. Но если войти e.dataTransfer или e, вы не сможете получить доступ к любым данным.

вы можете проверить здесь, даже на dragover вы не можете получить доступ, что в dataTransfer:

document.querySelector('#droppable').ondragover = function(e) {
  console.log('on dragover files are', e.dataTransfer.files)
  e.preventDefault();
}

document.querySelector('#droppable').ondrop = function(e) {
  console.log('on drop files are', e.dataTransfer.files)
  e.preventDefault();
}
<div id=droppable>Drop a file</div>
6