<html>
<head>
    <title>Right</title>
</head>

<body style="margin:0; padding:0">

<script>
function log(message) {
    console_doc = parent.frames[2].document;
    var item = console_doc.createElement("li");
    item.appendChild(console_doc.createTextNode(message));
    console_doc.getElementById('console_messages').appendChild(item);
}
</script>

<div style="height:75px"></div>

<div id="dragTarget2"
     style="width:150; height:150; background-color:lightblue; text-align:center;"
     ondrag="alert('ondrag right target')"
     ondragstart="alert('ondragstart right target')"
     ondragend="alert('ondragend right target')"
     ondragenter="log('ondragenter right target'); return false;"
     ondragover="log('ondragover right target'); event.dataTransfer.dropEffect = 'copy'; return false;"
     ondragleave="log('ondragleave right target')"
     ondrop="log('ondrop right target')">
  <span style="position: relative; top: 50">And here</span>
</div>
</body>
</html>