Question

如何将一个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（我们用音乐教授分数），但我们正在尝试实现创建节拍的“工厂”的概念，以及可以拖到一个小节上。鉴于我们有很多观点，我们使用骨干，它使用来自_underscore的html模板。

由于我们使用的是尖端的HTML5音频，因此我们仅限Chrome，因此Firefox问题不应成为问题。

还有其他建议吗？喜欢：

覆盖该页面的SVG，其z-index为1
与JQueryUI的组合
让SVG跟随拖动，当删除时，在丢弃的SVG区域中重新创建它？

Answer 1

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

跨越Div移动SVG元素

1 个答案: