Drag circles

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .active {
        stroke: #000;
        stroke-width: 2px;
    }
</style>
<body>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <svg width="800" height="480"></svg>
    <script>

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

var circles = d3.range(5).map(function (i) {
            return {
                x:  (i+1)*width /6,
                y: 250,
                id: i+1
            };
        });
  
        var color = d3.scaleOrdinal()
            .range(d3.schemeCategory20);

svg.selectAll("circle")
          .data(circles)
          .enter().append("circle")
            .attr("cx", function (d) { return d.x; })
            .attr("cy", function (d) { return d.y; })
            .attr("r", radius)
            .style("fill", function (d, i) { return color(i); })
            .on("mouseover", function (d) {d3.select(this).style("cursor", "move");})
            .on("mouseout", function (d) {})
            .call(d3.drag()
                  .on("start", dragstarted)
                  .on("drag", dragged)
                  .on("end", dragended)
                  );

function dragstarted(d) {
            d3.select(this).raise().classed("active", true);
        }

function dragged(d) {
            d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
        }

function dragended(d) {
            d3.select(this).classed("active", false);
        }

</script>
</body>

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