在 SVG 容器之间拖放 SVG 元素答案

【问题标题】：Drag/Drop SVG element between SVG containers在 SVG 容器之间拖放 SVG 元素
【发布时间】：2017-04-05 18:32:01
【问题描述】：

是否可以在一个 SVG 容器中克隆 SVG 元素并将其拖放到另一个 SVG 容器中？我有这样的 SVG 设置：

<svg> -source container
 <g><!-- some elements --></g>
</svg>
<svg> -destinatin container
</svg>

我希望能够将元素从源容器拖放到目标容器中。这里是jsfiddle。我从here 添加了拖放功能，但这仅适用于一个 SVG 容器。

【问题讨论】：

您必须删除原始容器中的对象并将其附加到新容器中。
@RobertLongson 我不想删除它，只是克隆它。但是，在将其与源容器分离后，是否可以拖放并将其附加到目标容器？
获得参考后，您可以使用 appendChild 将其附加到任何您想要的位置。
您是在询问克隆然后附加过程吗？或者您是在询问如何在页面上的两个 SVG 之间拖动 svg 元素时显示它。？
@PaulLeBeau 我说的是两个 SVG 之间的克隆然后附加过程

标签： javascript html svg drag-and-drop

【解决方案1】：

是的。很简单。只需执行 removeChild() 即可从第一个 SVG 中删除该元素。然后执行 appendChild() 将其添加到第二个 SVG。

如果元素不是<svg> 元素的直接子元素，那么您需要在元素的父组上调用removeChild()。 IE。如果它在一个组中，则为组元素。

document.getElementById("btn").addEventListener("click", function (evt) {

  var rect = document.getElementById("rect");
  var fromSVG = rect.ownerSVGElement;

  var toId = (fromSVG.id === "source") ? "dest" : "source";
  var toSVG = document.getElementById(toId);

  fromSVG.removeChild(rect);
  toSVG.appendChild(rect);
});

#source {
  background-color: #ffeeee;
}

#dest {
  background-color: #eeffee;
}

<svg id="source">
  <rect id="rect" x="100" y="50" width="50" height="40" fill="red"/>
</svg>

<svg id="dest">
</svg>

<br/>

<button id="btn">Click me to move rectangle</button>

【讨论】：