var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

function dragstart() {
  d3.select(this).attr("fill", '#d44');
}

function limitX(x) {
  if (x < radius) return radius;
  if (x > (width-radius)) return width-radius;
  return x;
}

function limitY(y) {
  if (y < radius) return radius;
  if (y > (height-radius)) return height-radius;
  return y;
}

function dragmove(d) {
  d3.select(this)
    .attr("cx", d.x = limitX(d3.event.x))
    .attr("cy", d.y = limitY(d3.event.y));
}

function dragend() {
  d3.select(this).attr("fill", '#4d4');
}

var width = window.innerWidth,
    height = window.innerHeight,
    svg = d3.select("body").append("svg")
      .attr({
        width: width,
        height: height
      }),
    radius = 40,

    circle = svg.selectAll("circle")
        .data([{ x: width/2, y: height/2}])
      .enter().append("circle")
        .attr("fill", '#4d4')
        .attr("stroke", "black")
        .attr("stroke-width", 1)
        .attr("r", radius)
        .attr("cx", function(d) {
          return d.x; })
        .attr("cy", function(d) {
          return d.y; });

circle.call(drag);