如何将一个 div 中的 svg 移动到另一个 div 中的 svg?
尝试将红色圆圈向左移动。
这是 fiddle .
<div id="parent">
<div id="left">
<svg id="leftSVG" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
</div>
<div id="right">
<svg id="rightSVG" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
</div>
</div>
最终,可以找到元素概念的工作基础证明 here (我们正在用音乐教授分数),但我们正在尝试实现创建节拍的“工厂”的想法,并且可以将其拖到小节上。鉴于我们有很多 View ,我们使用 backbone,它使用来自 _underscore 的 html 模板。
由于我们使用的是最先进的 HTML5 音频,因此我们仅限于 Chrome,因此 Firefox 的问题应该不是问题。
还有其他建议吗?喜欢:
- 覆盖该页面且 z-index 为 1 的 SVG
- 与 JQueryUI 的组合
- 让 SVG 跟随拖动,并在拖放时在拖放的 SVG 区域重新创建它?
最佳答案
Here's an attempt (fiddle)其中我基本上注意到您已经进入另一个 svg(负 x)的空间,然后我在那里重新绘制适当的 svg。
drag.on("dragend", function(){
if (d3.select(this).attr("cx") < 0) {
var newX = d3.select(this).attr("cx");
newX = parseInt(left.attr('width'))+parseInt(newX);
var newY = d3.select(this).attr("cy");
console.log('move it to: ', newX);
left.append('g')
.append('circle')
.attr('r', '10')
.attr('cx', newX)
.attr('cy', newY)
.attr('id', 'left'+newX)
.attr('fill', 'red')
.attr('stroke', 'black')
.attr('transform', 'translate(0,0)');
}
});
关于javascript - 跨 Divs 移动 SVG 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17244829/