JSFiddle - React, Tailwind, and code Playground

by videsignz

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="drawing_board"></div>

CSS

#drawing_board {
    width: 600px;
    height: 400px;
    border: 1px solid #000000;
    background-color: #ececec;
}

JavaScript

var page = Raphael("drawing_board");
        
        // start, move, and up are the drag functions
        start = function () {
            // storing original coordinates
            this.ox = this.attr("x");
            this.oy = this.attr("y");
            this.attr({opacity: .5});
            console.log( this.attr('width') ); //THIS IS WHERE I AM TRYING TO GET THE WIDTH
        },
        move = function (dx, dy) {
            // move will be called with dx and dy
            
                nowX = Math.min(600, this.ox + dx);
                nowY = Math.min(400, this.oy + dy);
                nowX = Math.max(0, nowX);
                nowY = Math.max(0, nowY);
                this.attr({x: nowX, y: nowY });
    
        },
        up = function () {
            // restoring state
            this.attr({opacity: 1});
                
        };   

        page.text(200, 50, "TEXT 1").attr({ cursor: "move", 'font-size': 16  , fill: '#3D6AA2'}).drag(move, start, up);
        page.text(200, 200, "TEXT 2").attr({ cursor: "move", 'font-size': 16  , fill: '#3D6AA2'}).drag(move, start, up);