JSFiddle - React, Tailwind, and code Playground

HTML

<div id="board"></div>

JavaScript

var paper = Raphael("board", 900, 900);
var circles = [];
for (i=20;i<900;i=i+Math.floor(Math.random()*30)+40) {
    for (j=20;j<900;j=j+Math.floor(Math.random()*30)+40) {
        circles.push(paper.circle(i, j, 10));
    }
}
alert("Total snap points: "+circles.length);
var circle = paper.circle(100, 100, 15); 
circle.attr({ fill: '#fff', stroke: '#00A0B0' });
var circleT = [];
var circleR = [];
var circleB = [];
var circleL = [];

var start = function (event) {
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    var threshold = 15;

    for (var myCircle in circles) {
        circleT[myCircle] = circles[myCircle].attr("cy") - threshold;
        circleR[myCircle] = circles[myCircle].attr("cx") + threshold;
        circleB[myCircle] = circles[myCircle].attr("cy") + threshold;
        circleL[myCircle] = circles[myCircle].attr("cx") - threshold;
    }
    circle.animate({ r: 20,fill: "#319F40", "stroke-width": 1 }, 200);
},
move = function (mx, my) {
    var inrange = false; 
    var mouseCX = this.ox + mx;
    var mouseCY = this.oy + my;
    var lockX = 0;
    var lockY = 0;
    //alert("test" + circleT[3]+ "," + circleB[3] + "-" + mouseCX); 
    
   for (var myCircle in circles) {
        if ((circleT[myCircle] < mouseCY
             && circleB[myCircle] > mouseCY ) 
            && (circleR[myCircle] > mouseCX 
                && circleL[myCircle] < mouseCX )) {
           inrange = true; 
           lockX =  circles[myCircle].attr("cx");
           lockY =  circles[myCircle].attr("cy");
        }
    }
    if (inrange) {
         this.attr({
            cx: lockX ,
            cy: lockY 
        });
    } else {
        this.attr({
            cx: mouseCX ,
            cy: mouseCY 
        });
    }
    
},
up = function () {
    circle.animate({ r: 15, fill: "#fff" , "stroke-width": 1 }, 200);
};
circle.drag(move, start, up);