Drag an image and drop on top of a SVG element

Question

I've created two circles using SVG and an image. I'm trying to drag the image into the circles and while I'm able to do so after dropping the image it is not being visible. How can I drop it on top of the circles.

<!DOCTYPE html>
<html>
<body>
<div id="circle" >
<svg id="dest" ondrop="drop(event)" ondragover="allowDrop(event)" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow" />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="logo.gif" draggable="true" ondragstart="drag(event)" class="draggable"  ondragend="" width="105" height="73">
</body>
<script>
    function allowDrop(ev) {
         ev.preventDefault();
    }
    function drag(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("text");
         ev.target.appendChild(document.getElementById(data));
    }
</script>
</html>

score 1 · Accepted Answer · answered Dec 10 '18 at 08:56

Apparently the ondrop and ondragover events are not detected on your svg tag. On top of that, images in SVG don't have the same syntax than in regular HTML.

This is a simple example of how you can achieve the basics of what you want to do, of course there are some adjustments to do, the position of the image, its size etc. So basically what i do here is getting the original image attributes to create an SVG image. You could also have a regular image placed outside of the SVG tag, but i'm not sure it will be easier for positioning and such.

You can also read this answer about emulating the drag events on SVG elements

NOTE: this works only for the first drag, even if the image still looks draggable after being moved, the function will throw an error because of the way img is selected from the DOM, it has been removed, so the img tag is not found anymore.

<!DOCTYPE html>
<html>
<body>
<div id="circle" ondrop="drop(event)" ondragover="allowDrop(event)" >
<svg id="dest" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow"  />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="https://placeimg.com/105/73/any" draggable="true" ondragstart="drag(event)" class="draggable"  ondragend="" width="105" height="73">
</body>
<script>
    function allowDrop(ev) {
         ev.preventDefault();
    }
    function drag(ev) {
         ev.dataTransfer.setData("text", ev.target.id);
    }
    function drop(ev) {
         ev.preventDefault();
         var data = ev.dataTransfer.getData("text"),
             img = document.getElementById(data),
             imgSrc = img.getAttribute('src'),
             imgW = img.getAttribute('width'),
             imgH = img.getAttribute('height'),
             //for example you can calculate X position from event circle
             imgX = ev.target.getAttribute('cx') - ev.target.getAttribute('r');

         ev.target.parentElement.innerHTML += '<image xlink:href="' + imgSrc + '" x="' + imgX + '" y="0" width="' + imgW + 'px" height="' + imgH + 'px"/>';
         img.parentNode.removeChild(img);
    }
</script>
</html>

Drag an image and drop on top of a SVG element

1 Answers1