Skip to content

Instantly share code, notes, and snippets.

@drewsonne
Created January 16, 2015 21:49
Show Gist options
  • Save drewsonne/60954c6f83d752569254 to your computer and use it in GitHub Desktop.
Save drewsonne/60954c6f83d752569254 to your computer and use it in GitHub Desktop.
Drag and Drop Container Divs
{"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,"fullscreen":false,"ajax-caching":true}
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"
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment