JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

window.onload = function() {
var nowX, nowY, w = 300, h=300, r=30, R = Raphael("canvas", w, h),   
    c = R.circle(100, 100, r).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5,
    cursor: "move"
});
var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    // restrict movement of circle to within boundaries
   if (this.ox + dx <= w - r && 
       this.oy + dy <= h - r &&
       this.ox + dx >= 0 + r && 
       this.oy + dy >= 0 + r)
   {
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
   } // else nothing
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};
c.drag(move, start, up);    
};