Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>drag & drop - dragging iframes overlaying draggable elements</title>
<style>
body > div {
height: 200px;
width: 200px;
background-color: blue;
position: absolute;
top: 8px;
left: 8px;
}
body > div + div {
background-color: fuchsia;
left: 258px;
}
iframe {
border: 5px solid yellow;
height: 130px;
width: 130px;
position: absolute;
top: 38px;
left: 38px;
}
p:first-of-type {
margin-top: 220px;
}
</style>
<script>
window.onload = function() {
var orange = document.getElementsByTagName('div')[0], fuchsia = document.getElementsByTagName('div')[1];
orange.ondragstart = function(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text/plain', 'FAIL');
};
fuchsia.ondragenter = fuchsia.ondragover = function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
};
fuchsia.ondrop = function(e) {
e.preventDefault();
document.getElementsByTagName('p')[0].innerHTML = 'FAIL';
};
};
</script>
<div draggable='true'></div><div></div>
<p>Use your pointing device to begin dragging inside the yellow border (not on any scrollbars that may appear), over to the pink box, then release it. Pass if nothing is dragged, and if this text does not change.
<iframe src="about:blank"></iframe></p>
<noscript><p>Enable JavaScript and reload</p></noscript>