I have a practice website I am working on. it is kdmalik.com/DEVDERBY/ now I am trying to get drag and drop to work in all browsers. Everything seems to work fine in Firefox and Safari. In Chrome though it doesn't drop right or Internet Explorer. I noticed it is becuase it is adding some meta information to the source image file (just in chrome, IE I haven't looked at yet, none of the drag/drops seem to work although I have a feeling that has to do with the "this" property).

HTML Code:
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&>
Is there a reason chrome would do this and not firefox or safari that I am missing? My drop and drag code is below. Any help would be appreciated on fixing this issue. It seems to be an issue with dataTransfer.getData("text/html") from my console.log approaches.

I know I could do this easier in jQuery but i'm trying to better understand JavaScript and it's specifics.

HTML Code:
function handleDrop(e) {
  // this / e.target is current target element.
  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  if (e.preventDefault) {
    e.preventDefault(); // stops the browser from redirecting.

  if (dragSrcEl.src != this.src) {
    if(this == mainPicture) {
        var imgCopy = e.dataTransfer.getData('text/html');
        var mainImage = document.createElement("img");
        mainImage.setAttribute('src', imgCopy);
        mainImage.setAttribute('height', '300');
        mainImage.setAttribute('width', '300');
        mainPicture.innerHTML = "";

    if (this == deleteBtn) {
        var imgs =  document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    if (document.location +imgs[i].getAttribute("src") == dragSrcEl.src) {

function handleDragStart(e) {
    this.style.opacity = '0.4';
    dragSrcEl = this;