JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<svg width="887" height="708">
  <image href="https://i.stack.imgur.com/Z1YVS.png" />
  <circle id="pointer" cx="27" cy="126" r="26" stroke="black" fill="red" />
  <circle id="target" cx="500" cy="573" r="5" stroke="black" fill="blue" style="visibility:hidden" />
</svg>

JavaScript

function getPosition(el){
  return {
  	x: parseInt(el.attr("cx")), 
  	y: parseInt(el.attr("cy")), 
  	r: parseInt(el.attr("r"))}
  ;
}

function dragmove(d) {
  d3.select(this)
    .attr("cx", d3.event.x)
    .attr("cy", d3.event.y);
}
var drag = d3.behavior.drag()
  .on("drag", dragmove)
  .on("dragend", function() {
    let p1 = getPosition(d3.select(this));
    let p2 = getPosition(d3.select('#target'));
    
    // euclidan distance
    let xDiff = p1.x - p2.x;
    let yDiff = p1.y - p2.y;
    let dist = Math.sqrt(xDiff * xDiff + yDiff * yDiff);

    if(dist <= p1.r + p2.r){
    	alert("found it");
      d3.select('#target').style('visibility', 'visible');
    } else {
    	d3.select('#target').style('visibility', 'hidden');
    }
  });

d3.select('#pointer').call(drag);