HTML ondragend Event Attribute - Playground Example

<!DOCTYPE html> 
  <html> 
  <head>
    <title>Attributes for mouse events.  Drag and drop.</title> 
    <style> 
    .dragndrop {
      width: 200px;
      height: 50px;
      border: 3px solid orange;
      padding: 30px;
      text-align: center;
      background: cornsilk;
      float: left;
      margin-right: 20px;
    }
    </style> 
  </head> 
  <body> 
  <p>Move the HTML &lt;p&gt; element between the two rectangles:</p> 
  <div class="dragndrop" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"> 
  <p ondragstart="dragStart(event)" ondrag="dragging(event)" ondragend="dragEnd(event)" draggable="true" id="anyid">Move me!</p> 
  </div> 
  <div class="dragndrop" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> 
  <p id="info"> </p> 
<script>
function dragStart ( event ) { 
  event.dataTransfer.setData( "Text" , event.target.id);  
} 
function dragging ( event ) { 
  document.getElementById("info").innerHTML = "The &lt;p&gt; element is being dragged (ondrag)"; 
} 
function allowDrop ( event ) { 
  event.preventDefault();  
} 
function dragEnter ( event ) { 
  if (event.target.className == "dragndrop") { 
    event.target.style.background = "yellow"; 
    event.target.style.border = "3px dotted black"; 
  } 
} 
function dragLeave ( event ) { 
  if (event.target.className == "dragndrop") { 
    event.target.style.background = ""; 
    event.target.style.border = ""; 
  } 
} 
function drop ( event ) { 
  var data = event.dataTransfer.getData ("Text");
  event.target.appendChild(document.getElementById(data));
} 
function dragEnd ( event ) { 
  document.getElementById("info").innerHTML="Draggable &lt;p&gt; element dropped onto the drag object (ondragend)"; 
}
</script> 
  </body> 
</html>