[英]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.