I am working on a program where I need to drag and drop images, in this case, fire engines, onto a map. I’ve done this code with jquery and it worked fine. I am now trying to implement this with pure javascript and I’m having a tough time.
Whenever, I use this code with a .jpeg it works fine. I can drag the image. When I try with a .png file, I get the little black circle with a line through it. What am I missing?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag And Drop </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="EngineClipArt.png" draggable="true" class="source" id="engine" width="100" alt="red fire engine" />
</div>
<script src="app.js"></script>
</body>
</html>
I couldn’t get the png file to work, so I experimented with using a .jpeg and that worked. Now when I replace the “puppy.jpg” with a .png. It stops being draggable. I was under the impression that all img should be draggable with html5. The only thing I am changing is the file type. On firefox, I can get the fire engine to drag with the black circle thing showing as well. On chrome, it just appears as the black circle with the line through it and there is no dragging. Same thing on edge.
lindsay fletcher is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.