JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viz"></div>

JavaScript

var vizSVG = d3.select("#viz")
    .append("svg:svg")
    .attr("width", 400)
    .attr("height", 300);
    
vizSVG.append("svg:circle")
    .attr("id", "blueCircle")
    .attr("cx", 50)
    .attr("cy", 140)
    .attr("r", 40)
    .attr("fill", "blue")
.call(d3.behavior.drag().on("drag", function(d) { move(d3.select(this).attr('id'));}));
    
vizSVG.append("svg:circle")
    .attr("id", "redCircle")
    .attr("cx", 100)
    .attr("cy", 140)
    .attr("r", 40)
    .attr("fill", "red")
.call(d3.behavior.drag().on("drag", function(d) { move(d3.select(this).attr('id')); }));

function move(id){
    console.log('move', id);
    var dragTarget = d3.select("#" + id);
    var thisNode = dragTarget[0][0];
    thisNode.parentNode.appendChild(thisNode)
    dragTarget
        .attr("cx", function(){return d3.event.dx + parseInt(dragTarget.attr("cx"))})
        .attr("cy", function(){return d3.event.dy + parseInt(dragTarget.attr("cy"))});
};