JSFiddle - React, Tailwind, and code Playground

by DarMontou

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<p>Works in Chrome or Firefox</p>
<p>Click the box and drag the connection line out</p>
<div id="my-canvas"><div>

CSS

svg{border:solid 1px #000;}

JavaScript

function Line(endX, endY, thisPaper) {    
    var end = { x: endX, y: endY };    
    var getPath = function() { return "M 15 15 L" + end.x + " " + end.y; };    
    var thisLine = thisPaper.path(getPath());    
    var redraw = function() { thisLine.attr("path", getPath()); }

    return { updateEnd: function(e) 
                { end.x = (e.clientX - $("#my-canvas").offset().left);    
                  end.y = (e.clientY - $("#my-canvas").offset().top);
                  redraw(); } };
};

var paper = Raphael("my-canvas", 300, 400);
var origin = paper.rect(10, 10, 10, 10).attr({fill: "grey"});
origin.mousedown(function(e) {
        e.preventDefault();
        var offX  = (e.clientX - $("#my-canvas").offset().left);
        var offY  = (e.clientY - $("#my-canvas").offset().top);
        line = Line(offX, offY, paper);
        $(paper.canvas).mousemove( function(e) { line.updateEnd(e); });
});

$(paper.canvas).mouseup(function(e) { $(paper.canvas).unbind('mousemove'); });