我正在尝试将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文件的链接!