拖拽Drop - DataTransfer对象 [英] Drag & Drop - DataTransfer object
问题描述
我正在构建一个简单的拖放上传器，我想知道为什么当我 console.log（e）（DragEvent）并查看 DragEvent.dataTransfer.files 它显示为空，但是...如果我 console.log（e .dataTransfer.files）它将显示删除的文件。
I'm building a simple drag n' drop uploader and I'm wondering why I can't see the file(s) I drop when I console.log(e) (DragEvent) and look at the DragEvent.dataTransfer.files it shows up empty, but... if I console.log(e.dataTransfer.files) it will show the dropped file(s).
// 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>
推荐答案
拖动数据存储具有不同的模式取决于您何时访问它：
The drag data store has different modes depending on when you access it:
- 在
dragstart事件中它已启用读/写模式。 - 在
drop事件中，它处于只读模式。 -
在所有其他事件中，它处于受保护的模式。
- On
dragstartevent it's on read/write mode. - On
dropevent, it's in read only mode. And on all other events, it's in protected mode.
受保护的模式已定义为此方式：
Protected mode is defined this way:
保护模式
Protected mode
适用于所有其他活动。可以枚举拖动数据存储中的格式和种类
表示拖动数据的项目列表，但
数据本身不可用，并且不能添加新数据。
For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.
见这里： https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store
这意味着当您在控制台中访问 dataTransfer 对象时，该对象不在 drop 或 dragstart 事件，它处于受保护的模式，阻止您访问数据。
That means that when you access the dataTransfer object in your console, which is not on drop or dragstart event, it's in protected mode, preventing you from accessing the data.
您可以查看 fileList ，因为您记录了 fileList dataTransfer 可读时，> drop 事件。但是如果你记录 e.dataTransfer 或 e ，你将无法访问任何数据。
You can view the fileList because you log the fileList on drop event when dataTransfer is readable. But if you log e.dataTransfer or e, you won't be able to access any data.
你可以在这里测试，即使在 dragover 你也无法访问 dataTransfer ：
You can test here, even on dragover you can't access what's 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>
这篇关于拖拽Drop - DataTransfer对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
