! Drag and drop (3)

forked from biovisualize's block: Drag and drop with D3

forked from wenzelmk's block: ! Drag and drop (3)

<!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>

var svg = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 1000)
    .attr("height", 1000);
    
svg.append("svg:rect")
    .attr("id", "blueRect")
    .attr("x", 20)
    .attr("y", 50)
    .attr("height", 50)
		.attr("width", 900)
    .attr("fill", "blue")
    .call(d3.behavior.drag().on("drag", move));
    
svg.append("svg:rect")
    .attr("id", "redRect")
    .attr("x", 20)
    .attr("y", 200)
    .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("y", function(){return d3.event.dy + parseInt(dragTarget.attr("y"))});
};

var line = svg.append("line")
    						.style("stroke", "black")
    						.attr("x1", 150)
    						.attr("y1", 150)
    						.attr("x2", 250)
    						.attr("y2", 300);
</script>
   
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js