njvack/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>
	<!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>