Circle dragging with snap-to-edge

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Docking Bubbles</title>
  <style type="text/css" media="screen">
    .bubble {
      stroke: steelblue;
      stroke-width: 1;
      fill: rgba(120, 40, 255, 0.3);
    }
  </style>
</head>
<body>
  <svg width="960" height="500"></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript">
    var words = ["Hello", "I", "am", "a", "docking", "bubble"];

var svg = d3.select("svg"),
        width = +svg.attr('width'),
        height = +svg.attr('height'),
        radius = 80;

var bubbles = d3.range(6).map(function(obj, ix) {
      return {
        text: words[ix],
        x: Math.round(Math.random() * (width - radius * 2) + radius),
        y: Math.round(Math.random() * (height - radius * 2) + radius)
      };
    });

var bubble = svg.selectAll('.bubble')
      .data(bubbles)
      .enter().append('circle')
        .attr('class', 'bubble')
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .attr('r', radius)
        .call(d3.drag()
          .on('drag', dragged));

https://d3js.org/d3.v4.min.js