Sürükle ve Bırak - DataTransfer nesnesi

Basit bir sürükle n 'yükleyici yükleyicisi yapıyorum ve neden dosya (lar) ı console.log(e) (DragEvent) ve DragEvent.dataTransfer.files'a baktığımda göremiyorum. boş gösterir, ancak ... console.log(e.dataTransfer.files) ise bırakılan dosyaları gösterecektir.Sürükle ve Bırak - DataTransfer nesnesi

// KOD

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

kaynak

2015-10-29 Jordan Davis

değişiyor birden işlevleriyle geçmiş olabilir Konsolda nesneye tıklayın zamanda özellikleri. Öyleyse neden aynı olmasını bekliyorsunuz? Daha sonra ihtiyacınız varsa, bunu dondurabilir, klonlayabilir veya kopyalayabilirsiniz. – Buksy

bunu eriştiklerinde bağlı olarak farklı modu vardır sürükleme veri deposu: Bu okumadak var

olay dragstart Açma/ modunu yazın.

drop olayında, yalnızca modunu okuyor.

Ve diğer tüm olaylarda, korumalı modunda.

Korumalı modu bu şekilde tanımlanır: Diğer tüm etkinlikler için

Korumalı mod

. Sürüklenen veri deposundaki öğelerin listesi biçim ve türleri numaralandırılabilir, ancak verilerinin kendisi kullanılamaz ve yeni veriler eklenemez.

Buraya bakın: Eğer drop veya dragstart olay değil Konsolun, içinde dataTransfer nesneyi eriştiklerinde, verileri erişmesini engelliyor, korumalı modunda olduğu anlamına gelir https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

. dataTransfer okunabilir olduğunda drop olaya fileList log çünkü

Sen fileList görebilirsiniz. Ancak, e.dataTransfer veya e oturum açarsanız, herhangi bir veriye erişemezsiniz.

Hatta dragover üzerinde size dataTransfer içinde ne erişemez, burada test edebilirsiniz:

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>

kaynak

2015-11-02 23:33:46

Niceeee teşekkür ederim! –

Sürükle ve Bırak - DataTransfer nesnesi

cevap

İlgili konular