JSFiddle - React, Tailwind, and code Playground

by veeramarni

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="whiteboard" />

JavaScript

var R = Raphael("whiteboard", 500, 500);    
var c = R.circle(100, 100, 50).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});
//var ox=0;
//var oy=0;
var el =R.rect(10,10,10,10).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});;
var start = function () {
    console.log("Here in the start");
    // storing original coordinates
  // this.ox = this.attr("cx");
  // this.oy = this.attr("cy");
    this.attr({opacity: 1});
          this.ox = 0;
    this.oy = 0;
    
};
var move = function (dx, dy) {
    // move will be called with dx and dy
    //this.attr({cx: this.ox + dx, cy: this.oy + dy,x: this.ox + dx, y: this.oy + dy});
    this.attr({
        transform: "...T" + (dx - this.ox) + "," + (dy - this.oy)
    });
       this.ox = dx;
    this.oy = dy;
};
var up = function () {
    // restoring state
    this.attr({opacity: .5});
 
};
c.drag(move, start, up);    
el.drag(move,start,up);