Drag the Yellow Box to Red Box

Red and Yellow Box

HTML

<title>HTML 5 Drag ＆ Drop</title>



<div>
<p>Drag the small yellow box with the dash border to the larger red box with the solid border</p>
</div>
<div id="item" draggable="true">
</div>
<div id="drop">
</div>

CSS

#drop {
  width: 300px;
  height: 200px;
  background-color: #ff0000;
  padding: 5px;
  border: 2px solid #000000;
}
#item {
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  padding: 5px;
  margin: 20px;
  border: 1px dashed #000000;
}
*[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
}
*:-khtml-drag {
  background-color: rgba(234,238,238, 0.5); }
}

JavaScript

function listenEvent (eventTarget, eventType, eventHandler) {
	if (eventTarget.addEventListener) {
  	eventTarget.addEventListener(eventType, eventHandler, false);   
  } else if (eventTarget.attachEvent) {
  	eventType ="on" + eventType;
    eventTarget.attachEvent(eventType, eventHandler);
  } else {
  	eventTarget["on" + eventType] = eventHandler;
   }
  }
//cancel event
function cancelEvent (event) {
	if (event.preventDefault) {
  	event.preventDefault) ();
  } else {
  event.returnValue = false;
  }
}

//cancel propagation
function cancelPropagation (event) {
	if (event.stopPropagation) {
  	event.stopPropagation();
    } else {
    	event.cancelBubble = true;()
    }
}

window.onload () {
	var target = document.getElementById("drop");
  listenEvent (target, "dragenter", cancelEvent);
  listenEvent (target, "dragover", dragOver);
  listenEvent (target, "drop", function (evt) {

			cancelPropagation(evt);
  		evt = evt || window.event;
      evt.dataTransfer.dropEffect = 'copy';
      var id = evt.dataTransfer.getData("Text");
      target.appendChild(document.getElementById));
  });
  
  var item = document.getElementById("item");
  item.setAttribute("draggable", "true");
  listenEvent(item, "dragstart", function(evt) {
  		evt - evt || window.event;
      evt.dataTransfer.effectAllowed = 'copy';
      evt.dataTransfer.setData("Text", item.id);     
  		});
  
  };
  
  function dragOver (evt) {
  	if (evt.preventDefault) evt.preventDefault();
    evt = evt || window.event;
    evt.dataTransfer.dropEffect = 'copy';
    return false;
 function listenEvent(eventTarget, eventType, eventHandler) {
	if (eventTarget.addEventListener) {
  	eventTarget.addEventListener(eventType, eventHandler, false);   
  } else if (eventTarget.attachEvent) {
  	eventType ="on" + eventType;
    eventTarget.attachEvent(eventType, eventHandler);
  } else {
  	eventTarget["on" + eventType] = eventHandler;
   }
  }
//cancel event
function cancelEvent (event) {
	if...