index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">

body {
  font-family: Sans-Serif; }

#content {
  border: solid 1px #aaa; }

.moveable-div {
  position: absolute;
  align: center;
  padding: 1em;
  background-color: #ddf;
  border-radius: 120px; }

.moveable-div p {
  padding: 10px 0px;
  font-size: 24px; }

circle {
  color: #fcc; }

    </style>
  </head>
  <body>
    <script type="text/javascript">

var width = 960,
    height = 500,
    radius = 40,
    r2 = radius/2,
    dragging;

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

function dragstart() {
  d3.select(this).style("border", "1px solid red");
}

function dragmove(d) {
  d3.select(this)
    .style("top", initialPosition.y + d3.event.dy - r2 + 'px')
    .style("left", initialPosition.x + d3.event.dx - r2 + 'px');
}

function dragend() {
  d3.select(this).style("border", null);
}

function mousedown() {
  document.onselectstart = function() { return false; };
  dragging = this;
}

function mousemove() {
  if (dragging) {
    d3.select(dragging)
        .style("top", initialPosition.y + d3.event.dy - r2 + 'px')
        .style("left", initialPosition.c + d3.event.dx - r2 + 'px');
    d3.event.stopPropagation();
  }
}

function mouseup() {
  document.onselectstart = function() { return true; };
  dragging = null;
}

var initialPosition = {
  x: width/2 - r2,
  y: height/2 - r2
}

var content = d3.select("body").append("div")
    .style("width", width + 'px')
    .style("height", height + 'px');

// d3.select(window).on("mouseup", mouseup);
var circleDiv = content.selectAll("div")
      .data(["div"])
    .enter().append("div")
      .attr('class', 'moveable-div')
      .style("top", initialPosition.y + 'px')
      .style("left", initialPosition.x + 'px')
      .text(function(d) { return d; })
      .call(drag);


    </script>
  </body>
</html>