JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<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(x, y) { end.x = x; end.y = y; redraw(); } };
};

var paper = Raphael("my-canvas",0, 0, 300, 400);
var origin = paper.rect(10, 10, 10, 10).attr({fill: "white"});
origin.mousedown(function(e) {
        line = Line(e.offsetX, e.offsetY, paper);
        $(paper.canvas).mousemove( function(e) {            line.updateEnd(e.offsetX, e.offsetY); });
});

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