JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<p>This was forked and modified from the example posted on StackOverflow:
    <a target="_blank" href="http://stackoverflow.com/questions/3675519/raphaeljs-drag-n-drop">http://stackoverflow.com/questions/3675519/raphaeljs-drag-n-drop</a>

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

JavaScript

window.onload = function() {
var nowX, nowY, R = Raphael("canvas", 500, 500),
    c = R.text(200, 200, "Drag Me").attr({"font-size": 14}),
    // 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: 1});
        if (this.attr("y") < 60 &&  this.attr("x") < 60)
            this.attr({fill: "#000"});        
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({fill: "#0000FF", text:"Argh, you're dragging me", "font-size": 14});            
        this.attr({x: this.ox + dx, y: this.oy + dy}); 
    },
    up = function () {
        // restoring state
        this.attr({fill: "#FF0000", text:"Oh dear, you dragged me", "font-size": 14});            
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
};