将1张图片拖放到2个“ svg”圈子内(来回)

我正在尝试将drag and drop的{​​{1}}变成2 logo。在我的代码的帮助下,图像被拖动到​​一个圆圈中,但并没有被拖动到另一个圆圈中。

如何修改code,以便可以在两个圆圈之间拖放图像

SVG circles
function drag(ev) {
  			ev.dataTransfer.setData("text",ev.target.id);
		}

		function allow(ev){
			ev.preventDefault();
		}

		function drop(ev) {
  			ev.preventDefault();
  			var data = ev.dataTransfer.getData("text");
  			var img1=document.getElementById(data),imgSrc=img1.getattribute('src'),imgw=img1.getattribute('width')
  			    imgh=img1.getattribute('height'),imgX = ev.target.getattribute('cx') - ev.target.getattribute('r')+20;
  			    console.log(imgX);
         ev.target.parentElement.innerHTML += '<image xlink:href="' + imgSrc + '" x="' + imgX + '" y="0" width="' + imgw + 'px" height="' + imgh + 'px"/>';
         img1.parentNode.removeChild(img1);

  			//ev.target.appendChild(document.getElementById(data));
		}

更新:

在答案部分中发布了SVG文件的链接!

dong137 回答:将1张图片拖放到2个“ svg”圈子内(来回)

HTML draggable / ondragstart等是HTML属性。它们不适用于SVG。因此,您需要使用标准鼠标事件来实现拖动。

请参阅:Drag and drop events in embedded SVG?

还有关于S.O的许多其他问题。与在SVG中实现拖动有关。

,

在保罗的帮助下,我找到了答案。确保文件扩展名应该在svg中。您也可以将其包含在html中。

File Link

本文链接:https://www.f2er.com/3097988.html

大家都在问