d3 from one div to another

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<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>

CSS

#left {
    float: left;
    width: 49%;
    max-height: 200px;
    background: gray;
}
#right {
    float: right;
    width: 49%;
    max-height: 200px;
    background: lightgray;
}

JavaScript

var drag = d3.behavior.drag();
  drag.on("drag", function() {
      d3.select(this).attr("cx", +d3.select(this).attr("cx") + d3.event.dx);
      d3.select(this).attr("cy", +d3.select(this).attr("cy") + d3.event.dy);
  })

console.log(drag);
var left = d3.select('#leftSVG');
var lbeat = left 
    .append('g')
    .append('circle')
    .attr('r', '20')
    .attr('cx', '50')
    .attr('cy', '50')
    .attr('id', 'left')
    .attr('fill', 'orange')
    .attr('stroke', 'black')
    .attr('transform', 'translate(0,0)')

var right = d3.select('#rightSVG');
var rbeat = right 
    .append('g')
    .append('circle')
    .attr('r', '10')
    .attr('cx', '150')
    .attr('cy', '50')
    .attr('id', 'left')
    .attr('fill', 'red')
    .attr('stroke', 'black')
    .attr('transform', 'translate(0,0)')
    .call(drag)