將跨越的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

回答

相關問題