lunkwill42/index.html

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

svg {
  float: left;
  border: solid 1px #aaa;
}

</style>
<script src="http://mbostock.github.com/d3/d3.js?2.7.1"></script>
<body>
<script>

var width = 238,
    height = 123,
    radius = 20;

var drag = d3.behavior.drag()
    .on("drag", dragmove);

var svg = d3.select("body").selectAll("svg")
    .data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", radius)
    .attr("height", radius)
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .call(drag);

function dragmove(d) {
  console.log("dragmove " + d3.event);
  d3.select(this)
      .attr("x", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
      .attr("y", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
}

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

	svg {
	float: left;
	border: solid 1px #aaa;
	}

	</style>
	<script src="http://mbostock.github.com/d3/d3.js?2.7.1"></script>
	<body>
	<script>

	var width = 238,
	height = 123,
	radius = 20;

	var drag = d3.behavior.drag()
	.on("drag", dragmove);

	var svg = d3.select("body").selectAll("svg")
	.data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
	.enter().append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("rect")
	.attr("width", radius)
	.attr("height", radius)
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.call(drag);

	function dragmove(d) {
	console.log("dragmove " + d3.event);
	d3.select(this)
	.attr("x", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))
	.attr("y", d.y = Math.max(radius, Math.min(height - radius, d3.event.y)));
	}

	</script>