<!DOCTYPE html>
<title>drag &amp; drop - dragging objects 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;
  }
  object {
    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.
<object data="about:blank"></object></p>
<noscript><p>Enable JavaScript and reload</p></noscript>