拖放 - 数据传输对象
Posted
技术标签:
【中文标题】拖放 - 数据传输对象【英文标题】：Drag & Drop - DataTransfer object 【发布时间】：2016-01-29 22:52:48 【问题描述】：我正在构建一个简单的拖放上传器，我想知道为什么当我 console.log(e) (DragEvent) 并查看它显示的 DragEvent.dataTransfer.files 时看不到我放置的文件空的，但是...如果我console.log(e.dataTransfer.files) 它将显示删除的文件。
//代码
<!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>
【问题讨论】：
在您单击控制台中的对象时，它可能已通过多个函数更改其属性。那么为什么你会期望它是一样的呢？如果以后需要，可以冻结、克隆或复制值。 【参考方案1】：拖动数据存储具有不同的模式，具体取决于您访问它的时间：
在dragstart 事件中，它处于读/写 模式。
在drop 事件中，它处于只读模式。
在所有其他事件中，它都处于受保护模式。
受保护的模式是这样定义的：
保护模式
对于所有其他事件。拖动数据存储中的格式和种类 可以枚举表示拖动数据的项目列表，但 数据本身不可用，无法添加新数据。
请看这里：https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store
这意味着当您在控制台中访问dataTransfer 对象时，它不在drop 或dragstart 事件中，它处于受保护 模式，阻止您访问数据。
您可以查看fileList，因为当dataTransfer 可读时，您会在drop 事件上记录fileList。但是如果您登录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>【讨论】：
以上是关于拖放 - 数据传输对象的主要内容，如果未能解决你的问题，请参考以下文章
将 TableView 的拖放 API 与底层值类型数据对象一起使用