1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<DOCTYPE !html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<style>
body {
width: 100%;
height: 100%;
margin: 0;
}
#source, #destination {
width: 200px;
height: 200px;
}
#destination {
border: red 1px solid;
}
</style>
<script>
function handleDragUpdate(event) {
event.preventDefault();
document.getElementById(`${event.type}Items`).textContent = JSON.stringify([...event.dataTransfer.items].map(item => {
return { kind: item.kind, type: item.type, file: item.getAsFile() };
}));
}
function runTest() {
destination.addEventListener("dragenter", handleDragUpdate);
destination.addEventListener("dragover", handleDragUpdate);
destination.addEventListener("drop", event => {
filecount.textContent = event.dataTransfer.files.length;
destination.setAttribute("src", URL.createObjectURL(event.dataTransfer.files[0]));
event.preventDefault();
});
}
function destinationLoaded() {
imageload.textContent = "true";
imageload.style.color = "green";
}
</script>
</head>
<body onload="runTest()">
<div><img id="source" src="icon.png"></img></div>
<img onload="destinationLoaded()" src="" id="destination"></img>
<div id="output">
<div>Number of files: <span id="filecount">N/A</span></div>
<div>Image loaded? <span style="color: red" id="imageload">false</span></div>
<div>dragenter items: <span id="dragenterItems"></span></div>
<div>dragover items: <span id="dragoverItems"></span></div>
</div>
</body>
</html>
|
