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

//Draw Rectangle
    
var whiteboard = $('#whiteboard');
var paper = Raphael('whiteboard' ,1000,1000);
paper.canvas.id = 1;
paper.circle(10,10,10);
var page1 = $('#1');
var cir;
var strtX=0;
var strtY=0;
var rad=0;
console.dir(page1);

whiteboard.bind('mousedown',mousedownHandler);

 function mousedownHandler(event){
     strtX = event.pageX;
     strtY = event.pageY;
    cir=  paper.rect(0,0,0,0);
     console.dir(cir);
 //   alert(event.pageX + " , " + event.pageY);
    whiteboard.bind('mousemove',mousemoveHandler);
    
};
function mouseupHandler(event){
    
    whiteboard.unbind('mousemove');
   cir.hover(dragIn, dragOut);
};

 function mousemoveHandler(event){
     
     var endX = event.pageX;
     var endY = event.pageY;
     var rad1 = endX - strtX;
     var rad2 = endY - strtY;
    var coX = strtX;
     var coY = strtY;
  //     console.log(rad1+ " ," + rad2);
  //   paper.circle(coX,coY,0).attr("r",rad/2);
     if(rad1 < 0 && rad2 < 0){
         cir.attr({"width":Math.abs(rad1),"height":Math.abs(rad2),"x":endX,"y":endY});
     } if(rad1 > 0 && rad2 < 0){
         cir.attr({"width":Math.abs(rad1),"height":Math.abs(rad2),"x":strtX,"y":endY});
     } if(rad1 <0 && rad2 > 0){
           cir.attr({"width":Math.abs(rad1),"height":Math.abs(rad2),"x":endX,"y":strtY});
          } 
     
          if(rad1 > 0 && rad2 > 0){
 //    else{
  cir.attr({"width":rad1,"height":rad2,"x":coX,"y":coY});
    //      cir.attr({"width":Math.abs(rad1),"height":Math.abs(rad2),"x":endX,"y":endY});
     }
    whiteboard.bind('mouseup',mouseupHandler);
     
    };




var dragIn = function(event){
    console.log(cir.transform());
}
    
    var dragOut = function(event){
    
    }