D3 Examples - test movement block

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.active {
  stroke: #000;
  stroke-width: 2px;
}
​
.rect {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}
​
</style>
​
<body>
​
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
​
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    rech = 80,
    recw = 50;
​
var whatever =  [
    {x : 50, y : 10},
];
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);
​
var group = svg.append("g")
    .data(whatever)
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged));
​
group.append("rect")
     .attr("x", function(d) { return d.x; })
     .attr("y", function(d) { return d.y; })
     .attr("height", 80)
     .attr("width", 50)
     .style("fill", "purple");
  
    
function dragstarted(d) {
  d3.select(this).raise();
}
​
function dragged(d) {
  d3.select(this).select("rect")
    .attr("x", d.x = Math.max(0, Math.min(width, d3.event.x)))
    .attr("y", d.y = Math.max(0, Math.min(height, d3.event.y)));
}
</script>
</body>
    