ドラッグ＆ドロップ - DataTransferオブジェクト

私は単純なドラッグアンドドロップアップローダーを構築していますが、私はconsole.log(e)（DragEvent）とDragEvent.dataTransfer.filesを見るとドロップしたファイルを見ることができないのでしょうか？空になっていますが、もし私がconsole.log(e.dataTransfer.files)なら、それはドロップされたファイルを表示します。ドラッグ＆ドロップ - DataTransferオブジェクト

// CODE

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

出典

2015-10-29 Jordan Davis

コンソールでオブジェクトでクリックする時、それは変更複数の機能を通過したかもしれませんその特性。それでなぜあなたはそれが同じであると期待しますか？後で必要な場合は、フリーズしたり、値を複製またはコピーすることができます。 – Buksy

はドラッグデータストアは、あなたがそれにアクセスするときに応じて、異なるモードがあります。

それは読み取り/モードを書く上だdragstartイベントで。
dropイベントでは、の読み取り専用モードです。
他のすべてのイベントでは、モードです。

保護モードはこのように定義されています。他のすべてのイベントのために

保護モード

。ドラッグデータストアのフォーマットと種類ドラッグされたデータを表すアイテムのリストを列挙できますが、データ自体は利用できず、新しいデータを追加することはできません。

はここを参照してください：あなたはdropまたはdragstartイベントではなく、あなたのコンソールにdataTransferオブジェクトにアクセスすると、それがデータにアクセスするからあなたを防止し、保護モードでだということを意味しhttps://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

。

dataTransferが読み取り可能であるときにfileListdrop上のイベントをログに記録するのであなたはfileListを表示することができます。しかし、e.dataTransferまたはeを記録すると、どのデータにもアクセスすることができなくなります。

あなたはdataTransferで何にアクセスできなくてもdragoverに、ここでテストすることができます。

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>

出典

2015-11-02 23:33:46

Niceeeeありがとう！ –

ドラッグ＆ドロップ - DataTransferオブジェクト

答えて

関連する問題