将跨越的div

如何在一个DIV移动的SVG，到SVG在另一个DIV SVG元素？将跨越的div

尝试红色圆圈向左移动。

这里是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（我们正在教音乐分数），但我们正在努力实现在其中创建节拍“工厂”的理念，可以拖到一个措施。鉴于我们有很多观点，我们利用骨干，它使用_underscore的html模板。

由于我们使用最先进的HTML5音频，我们仅限于Chrome浏览器，所以Firefox的问题不应该是一个问题。

其他建议？像：

覆盖该页面，并具有1
组合与jQueryUI的一个z-index的一个SVG
有SVG遵循阻力，当跌落，重新创建它在下降SVG区？

来源

2013-06-21 chris Frisina

由于处理程序，元素等完全分离，所以不能使用两种不同的SVG。你需要一个单一的元素。 –

@LarsKotthoff更新，你能想到其他解决方案吗？ PS，谢谢你在小提琴上的帮助！ –

这里有两个'rect's作为背景纯SVG的解决方案：http://jsfiddle.net/6a6da/34/ –

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)'); 
    } 
});

来源

2013-10-29 20:01:56 Michael

回答

相关问题