Drag and Drop Sql Map

by lasitha_prabodha

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<body>
    <div class="row">
        <div class="col-md-4">
            <div class="pull-left ">
                <div class="parent draggable box" id="parent1">Left drag</div>
            </div>

            <div class="pull-right">
                <div class="child parent1 draggable box">Right drag</div>
            </div>
        </div>
    </div>
</body>

CSS

.row{
margin-top:2in;
}

.box{
    border:1px solid #ccc;
    padding:10px;
}

JavaScript

var Belay = (function () {
    var settings = {
        strokeColor: '#fff',
        strokeWidth: 2,
        opacity: 1,
        fill: 'none',
        animate: false,
        animationDirection: 'right',
        animationDuration: .75
    };
    var me = {};

    me.init = function (initObj) {
        if (initObj) {
            $.each(initObj, function (index, value) {
                //TODO validation on settings
                settings[index] = value;
            });
        }
    }

    me.set = function (prop, val) {
        //TODO validate
        settings[prop] = val;
    }

    me.on = function (el1, el2) {
        var $el1 = $(el1);
        var $el2 = $(el2);
        if ($el1.length && $el2.length) {
            var p;

            var el1pos = $(el1).offset();
            var el2pos = $(el2).offset();

            var el1H = $(el1).outerHeight();
            var el1W = $(el1).outerWidth();

            var el2H = $(el2).outerHeight();
            var el2W = $(el2).outerWidth();

            var node1X = Math.round(el1pos.left + el1W);
            var node2X = Math.round(el2pos.left);
            var overlapping = node1X >= node2X;
            
            var svgwidth = Math.abs(node2X - node1X);
            var svgleft = Math.min(node1X, node2X);

            var node1Y = Math.round(el1pos.top + el1H / 2);
            var node2Y = Math.round(el2pos.top + el1H / 2);
            
            var svgheight = Math.abs(node1Y - node2Y);
            var svgtop = Math.min(node1Y, node2Y);

            var pt1x = node1X - svgleft;
            var pt1y = node1Y - svgtop + settings.strokeWidth;
            var pt2x = node2X - svgleft;
            var pt2y = node2Y - svgtop + settings.strokeWidth;

            // cpt is the length of the control point vector
            // variew with distance netween boxes
            var cpt = Math.round(svgwidth * Math.min(svgheight / 300, 1));

            if (overlapping) {
                // Need to widen the svg because...