Drag and Drop Chrome and IE

[malikk]

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).

<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.

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');
        console.log(imgCopy);
        var mainImage = document.createElement("img");
        mainImage.setAttribute('src', imgCopy);
        mainImage.setAttribute('height', '300');
        mainImage.setAttribute('width', '300');
        mainPicture.innerHTML = "";
        mainPicture.appendChild(mainImage);
        this.classList.remove('over');
        return;
    }

    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) {
        imgs[i].parentNode.removeChild(imgs[i]);
    }
}

function handleDragStart(e) {
    //alert("test");
    this.style.opacity = '0.4';
    dragSrcEl = this;
    //alert(dragSrcEl);
    e.dataTransfer.effectAllowed='all';
    console.log(dragSrcEl);
    e.dataTransfer.setData("text/html",dragSrcEl.src);
}