Drag and Drop Container Divs

_.md

[ Launch Inlet ]
Gist #3200444

config.json

{"description":"Drag and Drop Container Divs","endpoint":"","display":"html","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6760191846522782,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var display = d3.select("#display");

var chartContainer1 = display.append("div")
    .attr("id", "chart1")
	.style({width: "300px", 
            height: "200px", 
            top: "50px",
            left: "10px",
            position: "absolute",
            "background-color": "orange"
           })
    .call(d3.behavior.drag().on("drag", move));

chartContainer1.append("svg")
    .append("circle")
    .attr({cx: 50, cy: 50, r: 50})
    .style({fill: "yellow"});
    
var chartContainer2 = display.append("div")
    .attr("id", "chart2")
    .style({width: "300px", 
            height: "200px", 
            top: "50px",
            left: "400px",
            position: "absolute",
            "background-color": "skyblue"
           })
    .call(d3.behavior.drag().on("drag", move));

chartContainer2.append("svg")
    .append("circle")
    .attr({cx: 50, cy: 50, r: 50})
    .style({fill: "aliceblue"})
	.on("mouseover", function(d, i){
			d3.select(this).style({fill: "red"});
    	})
	.on("mouseout", function(d, i){
    		d3.select(this).style({fill: "aliceblue"});
    	});
 
function move(){
    this.parentNode.appendChild(this);
	var dragTarget = d3.select(this);
	dragTarget.style({
		left: d3.event.dx + parseInt(dragTarget.style("left")) + "px",
    	top: d3.event.dy + parseInt(dragTarget.style("top")) + "px"
	});
}