I'm new to coding in Javascript and I'm attempting to insert an image inside a border created with CSS. Unfortunately, the script doesn't seem to be working properly. It's possible that there is a small error in the code causing the issue.
Although the snippet functions correctly, the image does not display as expected.
"e" stands for event. In my code, I have functions for drag(e), allowdrop(e), and drop(e).
Thanks
<!doctype html>
<html>
<head>
<title>drag and drop</title>
<style type="text/css">
#targetDiv {
margin-left: 300px;
width: 200px;
height: 150px;
padding: 10px;
border: 1px solid #999999;
}
</style>
</head>
<body>
<h1>drag and drop</h1>
<div id="targetDiv" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<img id="dragItem" src="market-street-car.jpg" width="200" height="150" draggable="true" ondragstart="drag(event)" />
<script>
function drag(e) {
e.dataTransfer.setData("Text", e.target.id);
}
function allowDrop(e) {
e.preventDefault();
}
function drop(e) {
var dragItem = e.dataTransfer.getData("Text");
e.preventDefault();
e.target.appendChild(document.getElementById(dragItem));
}
//You don't need to edit this one cuz you don't need var var is probably optional
</script>
</body>
</html>