D3 Examples - ! Drag and drop (3)

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", 1000)
    .attr("height", 1000);
    
vizSVG.append("svg:rect")
    .attr("id", "blueRect")
    .attr("x", 50)
    .attr("y", 140)
    .attr("height", 50)
        .attr("width", 900)
    .attr("fill", "blue")
    .call(d3.behavior.drag().on("drag", move));
    
vizSVG.append("svg:rect")
    .attr("id", "redRect")
    .attr("x", 100)
    .attr("y", 140)
    .attr("height", 50)
        .attr("width", 900)
    .attr("fill", "red")
    .call(d3.behavior.drag().on("drag", move));
​
function move(){
    this.parentNode.appendChild(this);
    var dragTarget = d3.select(this);
    dragTarget
        .attr("x", function(){return d3.event.dx + parseInt(dragTarget.attr("x"))})
        .attr("y", function(){return d3.event.dy + parseInt(dragTarget.attr("y"))});
};
​
</script>
   
</body>
</html>
    