跨 Div 移动 SVG 元素

Posted 2023-02-22

【中文标题】跨 Div 移动 SVG 元素

【英文标题】：Move an SVG element across Divs

【发布时间】：2013-06-19 03:37:16

【问题描述】：

如何将一个 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 区域中重新创建它？

【问题讨论】：

您不能使用两个不同的 SVG 来执行此操作，因为处理程序、元素等是完全独立的。你需要一个元素。

@LarsKotthoff 更新了，你能想到其他解决方案吗？ PS，感谢您对小提琴的帮助！

这是一个纯 SVG 解决方案，以两个 rects 作为背景：jsfiddle.net/6a6da/34

@LarsKotthoff 不错，但在 FF 20.0.1 中似乎有问题

那么火狐的问题不是问题吗？ ;)

【参考方案1】：

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