I am trying to implement drag and drop div, like this . Unfortunately, it doesn't work for me, when I try to drag to this div, a new tab with the selected file opens. Here is my code
<div id="dropzone" style="height:200px; border: 4px double black;" ></div>
<script>
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
var length = e.dataTransfer.items.length;
for (var i = 0; i < length; i++) {
var entry = e.dataTransfer.items[i].webkitGetAsEntry();
if (entry.isFile) {
// do whatever you want
} else if (entry.isDirectory) {
// do whatever you want
}
}
};
</script>
How can I make it work?
var dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); }
#dropbox { height: 100px; border: 4px double black; background-color: lightgray; font: 5em bold monospace; text-align: center; }
<div id="dropbox"> Drag files here! </div>
The Google link is outdated, but this allows the file system to work in a very similar fashion. An example of this is above.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.