index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Circley</title>
  <style type="text/css">
    body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}
  #other {
    fill: rgba(70,120,160,.5);
  }

  #self {
     fill: rgba(170,100,120,.5);
  }

  #self:hover {
     fill: rgba(170,100,120,.8);
   }
  </style>
</head>
<body>
  <h1>Let's move some circles!</h1>
  <svg width="600" height="60">
    <circle id="other" cx="30" cy="30" r="30" />
    <circle id="self" cx="120" cy="30" r="30" class=""/>
  </svg>
  <div>
  Distance: <span id="dist"></span>
  </div>
<script type="text/javascript">
var self_cir = document.getElementById("self");
var other_cir = document.getElementById("other");
var dist = document.getElementById("dist");
var dragging = false;
var last_x = 0;

var start_drag = function(ev) {
  dragging = true;
  last_x = ev.x;
}

var stop_drag = function(ev) {
  dragging = false;
}

var drag_move = function(ev) {
  if (!dragging) { return; }
  var dx = ev.x - last_x;
  var elt_x = parseInt(ev.target.getAttribute("cx"), 10);
  elt_x += dx
  ev.target.setAttribute("cx", elt_x);
  last_x = ev.x;
  update_distance();
}

var update_distance = function() {
  dist.innerHTML = Math.abs(
    parseInt(self_cir.getAttribute("cx"), 10) -
    parseInt(other_cir.getAttribute("cx"), 10));
}

self_cir.addEventListener('mousedown', start_drag);
self_cir.addEventListener('mouseup', stop_drag);
self_cir.addEventListener('mouseout', stop_drag);
self_cir.addEventListener('mousemove', drag_move);
update_distance();

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