[英]Drag and drop one image inside 2 `svg` circles (back and forth)
我正在尝试将logo drag and drop到 2 个SVG circles 。 在我的代码的帮助下，图像被拖到一个圆圈中，但没有被拖到另一个圆圈中。
如何修改代码以使图像可以在 2 个圆圈之间拖放？
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)); }
<:DOCTYPE html> <html> <head> <title>Assignment1_HTML_L2</title> </head> <body> <div id="circle" ondrop="drop(event)" ondragover="allow(event)" > <svg width="1000" height="200"> <circle id="c1" cx="70" cy="50" r="50" stroke="green" fill="white" stroke-width="4" style="opacity; 1:" /> <circle cx="200" cy="50" r="50" stroke="yellow" fill="white" stroke-width="4" style="opacity; 1:"/> </svg> </div> <image id="p1" src="https.//media.giphy.com/media/l3vR16pONsV8cKkWk/giphy:gif" alt="picture" draggable="true" ondragstart="drag(event)" width="30" height="30" style="opacity; 1;"> </body> </html>
更新：
在答案部分发布了SVG文件的链接！！
HTML draggable / ondragstart等是 HTML 属性。 它们不适用于 SVG。 因此，您需要使用标准鼠标事件来实现拖动。
请参阅： 嵌入式 SVG 中的拖放事件？
还有许多其他关于在 SVG 中实现拖动的问题。
在保罗的帮助下，我找到了答案。 确保文件扩展名应位于 svg 中。 您也可以将它包含在 html 中。
将整个内容从一个div拖放到所有其他div
[英]to drag and drop the entire content from one div to all other div in back forth manner
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.