Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>drag & drop - cursor should show drop-allowed for file drops</title>
<style>
body > div {
height: 200px;
width: 200px;
background-color: orange;
position: absolute;
top: 8px;
left: 8px;
}
body > div + div {
background-color: navy;
left: 250px;
}
body > div + div + div {
background-color: fuchsia;
left: 500px;
}
p:first-of-type {
margin-top: 220px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var blue = document.getElementsByTagName('div')[1], fuchsia = document.getElementsByTagName('div')[2];
blue.ondragenter = blue.ondragover = function(e) {
//this test assumes the browser will default to opening the file if the page does not want it
e.preventDefault();
e.dataTransfer.dropEffect = 'none';
};
fuchsia.ondragenter = fuchsia.ondragover = function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
};
fuchsia.ondrop = function(e) {
e.preventDefault();
};
};
</script>
<div></div><div></div><div></div>
<p>Use your mouse to drag a *.html file from your computer's desktop over the three coloured squares on this page. The mouse cursor should appear as a "drop-allowed" cursor over all three squares.<br>
Release the drag over the pink square. If a prompt appears, accept it. The cursor should revert to the default mouse cursor.</p>
<p>This test only applies to platforms with a mouse cursor that can change to indicate drop status.</p>
<p>This test assumes the browser will open dropped files natively if they are not handled by a script.</p>
<noscript><p>Enable JavaScript and reload</p></noscript>