test movement block

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.active {
  stroke: #000;
  stroke-width: 2px;
}

.rect {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}

</style>

<body>

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>

https://d3js.org/d3.v4.min.js