Drag and Drop Chrome and IE
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="Content-Type" content="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');
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);
}