Drag & Drop - oggetto DataTransfer - Biblioteca eccellente

Sto costruendo un semplice uploader drag and drop e mi sto chiedendo perché non riesco a vedere il file (i) che rilascia quando I console.log(e) (DragEvent) e guardo il DragEvent.dataTransfer.files appare vuoto, ma ... se I console.log(e.dataTransfer.files) mostrerà i file rilasciati.Drag & Drop - oggetto DataTransfer

// CODICE

<!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>

fonte

2015-10-29 Jordan Davis

Al momento si fa clic sull'oggetto in consolle potrebbe essere passato attraverso molteplici funzioni che cambiano le sue proprietà Quindi perché ti aspetteresti che sia lo stesso? Se ne hai bisogno in seguito, puoi bloccarlo, clonarlo o copiare il valore. – Buksy

L'archivio dati trascinamento ha diverse modalità a seconda di quando si accede:

Su dragstart evento è su lettura/scrittura in modalità.
Su evento drop, è in leggi solo la modalità.
E su tutti gli altri eventi, è in modalità protetta.

protetta modalità è definita in questo modo:

modalità protetta

Per tutti gli altri eventi. I formati e i tipi nell'elenco di dati di trascinamento elenco di elementi che rappresentano i dati trascinati possono essere enumerati, ma i dati non sono disponibili e non è possibile aggiungere nuovi dati.

vedere qui: https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

Ciò significa che quando si accede l'oggetto dataTransfer nella console, che non è sul drop o dragstart evento, è in protetta modalità, impedendo l'accesso ai dati.

è possibile visualizzare il fileList perché si accede alla fileList su drop evento quando dataTransfer è leggibile. Ma se si registra e.dataTransfer o e, non sarà possibile accedere a tutti i dati.

È possibile verificare qui, anche su dragover non è possibile accedere cosa c'è in 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>

fonte

2015-11-02 23:33:46

Niceeee grazie! –

Drag & Drop - oggetto DataTransfer

risposta

Problemi correlati