D3 Examples - Drag and drop with D3

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<title>Drag And Drop</title>
</head>
<body>  
​
<div id="viz"></div>
​
<script type="text/javascript">
​
var vizSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 400)
    .attr("height", 300);
    
vizSVG.append("svg:circle")
    .attr("id", "blueCircle")
    .attr("cx", 50)
    .attr("cy", 140)
    .attr("r", 40)
    .attr("fill", "blue")
    .call(d3.behavior.drag().on("drag", move));
    
vizSVG.append("svg:circle")
    .attr("id", "redCircle")
    .attr("cx", 100)
    .attr("cy", 140)
    .attr("r", 40)
    .attr("fill", "red")
    .call(d3.behavior.drag().on("drag", move));
​
function move(){
    this.parentNode.appendChild(this);
    var dragTarget = d3.select(this);
    dragTarget
        .attr("cx", function(){return d3.event.dx + parseInt(dragTarget.attr("cx"))})
        .attr("cy", function(){return d3.event.dy + parseInt(dragTarget.attr("cy"))});
};
​
</script>
   
</body>
</html>
    