Drag and Drop issue with Chrome and IE
<p>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 drops seem to work although I have a feeling that has to do with the "this" property).</p>

<pre><code>&lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html;charset=UTF-8&amp;quot;&amp;gt&gt;
</code></pre>

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

<pre><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');
        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 &lt; 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);
}
</code></pre>
