CODEWITHSUNDEEP
htmldraggabledroppable
lindsay fletcher
lindsay fletcher

Reputation: 11

Can't use png as a draggable?

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" />

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

Upvotes: 1

Views: 60

Answers (1)

Emmanuel Akujobi
Emmanuel Akujobi

Reputation: 21

This is likely from browser errors in handling transparency within draggable elements.

Have you considered setting a background color for your draggable element (the fire engine image) using CSS. This will replace the transparent pixels with a solid color, allowing the browser to recognize it for dragging.

Also, a solution for transparency and enhancing dragging functionality might look like this;

<!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" style="background-color: white;" />

<script src="app.js"></script>

</body>
</html>

Added the style attribute to the img tag, and inside the style, see if setting background-color: white; would make any difference. This will replace transparent pixels with white, allowing the browser to recognize the image for dragging.

Upvotes: 0

Related Questions