Encountering an issue where the image does not display in the left box after dropping it. Here is the sequence of events:
Before dragging the image: https://i.sstatic.net/C6JSM.png
After dragging the image, it fails to display: https://i.sstatic.net/7Du0c.png
The error reported on Chrome is as follows:
GET file:///C:/%22test Dropped angelo.js:42 leftbox.innerHTML=e.dataTransfer.getData('text');
Below is the HTML code snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>angelos site</title>
<link rel="stylesheet" href="main.css">
<script src="angelo.js"></script>
</head>
<body>
<section id="leftbox">
i dare you to drop an image inme.
</section>
<section id="rightbox">
<img id="facepic" src="C:\test\face.png">
</section>
</body>
</html>
JavaScript function involved:
function doFirst(){
mypic=document.getElementById('facepic');
mypic.addEventListener("dragstart",startDrag,false);
leftbox=document.getElementById('leftbox');
leftbox.addEventListener("dragenter",function(e){e.preventDefault();},false);
leftbox.addEventListener("dragover",function(e){e.preventDefault();},false);
leftbox.addEventListener("drop",dropped,false);
}
function startDrag(e){
var code='<img src="C:\test\face.png">';
e.dataTransfer.setData('Text',code);
}
CSS Style included:
#leftbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid blue;
}
#rightbox{
float:left;
width:250px;
height:250px;
margin:5px;
border:3px solid green;
}