Jor*_*vis 9 javascript html5 drag-and-drop drag
我建立一个简单的拖N"降上传,我想知道为什么我看不到我滴在我的文件(S) 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>
该拖拽数据存储有不同的模式,这取决于当你访问它:
dragstart事件上,它处于读/写模式.drop事件中,它处于只读模式.在所有其他事件中,它处于保护模式.
保护模式以这种方式定义:
保护模式
对于所有其他活动.可以枚举拖动数据存储表示拖动数据的项目列表中的格式和种类,但数据本身不可用,并且不能添加新数据.
请参见:https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store
这意味着当您访问dataTransfer控制台中未启用的对象drop或dragstart事件时,它处于受保护模式,阻止您访问数据.
您可以查看,fileList因为您可以在可读时记录fileListon drop事件dataTransfer.但是,如果您记录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>| 归档时间： |
|
| 查看次数： |
968 次 |
| 最近记录： |