JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="canvas"></div>
    </body>
</html>

CSS

#canvas
        {
            height: 500px;
            width: 500px;
            margin: 0 auto;
            border: 1px dashed black;
        }

JavaScript

window.onload = function () {
               var height = 500;
               var width = 500;
               var rectSize = 50;
               var R = Raphael("canvas", height, width);

               // Build Rects
               var rect1 = R.rect((width / 2) - (rectSize/2), 0, rectSize, rectSize).attr({
                   fill: "hsb(.8, 1, 1)",
                   stroke: "none",
                   opacity: .5,
                   cursor: "move"
               });
               var rect2 = R.rect(100, 100, rectSize, rectSize).attr({
                   fill: "hsb(0, 0, 0)",
                   stroke: "none",
                   opacity: .5,
                   cursor: "move"
               });
 
            // start, move, and end are the drag functions
               var start = function () {
                   // storing original coordinates
                   this.ox = this.attr("x");
                   this.oy = this.attr("y");
                   this.attr({ opacity: 1 });
               };
               var move = function (dx, dy) {
                   // keeps Rect in boarder
                   var rangeX = Math.max(0, this.ox + dx)
                   var rangeY = Math.max(0, this.oy + dy)
                   var rangeX = Math.min(width - rectSize, rangeX)
                   var rangeY = Math.min(height - rectSize, rangeY)
                   
                   // Check collison                                                           
                   var collide = rect_collision(rect2.attr("x"), rect2.attr("y"), rectSize, rect1.attr("x"), rect1.attr("y"), rectSize);
                   if (collide == "top") {
                        rangeY = Math.min(rect1.attr("y"), this.oy + dy);
                       } else if (collide == "bottom"){
                        rangeY = Math.max(rect1.attr("y"), this.oy + dy);
                    } else if (collide == "left"){
                        rangeX = Math.min(rect1.attr("x"), this.ox + dx);
                    }...