index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">

body {
  font-family: Sans-Serif; }

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

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

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

circle {
  color: #fcc; }

    </style>
  </head>
  <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">

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

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

var div = d3.select('body').append("div")
    .attr('class', 'moveable-div')
    .style("top", height/2 - r2 + 'px')
    .style("left", width/2 - r2 + 'px')
    .on("mousedown", mousedown)
    .on("mousemove", mousemove);

div.append('p').text("this is text");

d3.select(window).on("mouseup", mouseup);

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

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

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

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