How to connect div with flexible line

I have some dynamic draggable DIVs and I want to connect the DIVs with each other through flexible dynamic lines. The line should be dynamically connectable or removable. So how can i achieve my goal?
Also I want to perform an action on connect/remove event.

Below I have tried to describe my situation through the image:

The end goal is something like this, to give you an idea:

How can I do this type of flexible line through the svg or flexbox or jQuery or CSS trick? Anybody please suggest any way to achieve this goal.

My current HTML/CSS/JS looks something like this:

<html>
    <head>
        <title>Dragable </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="bootstrap.min.css" rel="stylesheet"><!--//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/-->
        <link href="jquery-ui.css" type="text/css" rel="stylesheet" media="all"><!--//code.jquery.com/ui/1.10.1/themes/base/-->
        <style>
            @import url(http://fonts.googleapis.com/css?family=Antic+Slab);

            .ui-draggable-dragging {
                z-index: 10000!important;
            }

            html,body {
                height:100%;
            }

            h1 {
                font-family: 'Antic Slab', serif;
                font-size:80px;
                color:#DDCCEE;
            }

            .lead {
                color:#DDCCEE;
            }

            /* Custom container */
            .container-full {
                margin: 0 auto;
                width: 100%;
                min-height:100%;
                background-color:#110022;
                color:#eee;
                overflow:hidden;
            }

            .container-full a {
                color:#efefef;
                text-decoration:none;
            }

            .v-center {
                margin-top:7%;
            }

            .panel {
                background-color: yellow;
            }

            .panel-droppable {
                width: 275px;
                height: 200px;
                border: solid 1px black;
                background-color: grey;
            }

        </style>
        <script type='text/javascript' src="jquery.min.js"></script><!--//ajax.googleapis.com/ajax/libs/jquery/2.0.2/-->
        <script type='text/javascript' src="jquery-ui.js"></script><!--//code.jquery.com/ui/1.10.1/-->
        <script type='text/javascript' src="bootstrap.min.js"></script><!--//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/-->
        <script async type="text/javascript" src="carbon.js?zoneid=1673&serve=C6AILKT&placement=bootplycom" id="_carbonads_js"></script><!--//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=bootplycom-->
        <script type="text/javascript">
            $(document).ready(function () {
                $('.panel').draggable();
                $('#hellolanding').draggable();
                $('.panel-droppable').droppable()
            });
        </script>
    </head>
    <body>
        <div class="container">

            <div class="row">

                <div class="col-md-3"> 
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3>Drag 1</h3></div>
                    </div>
                </div>

                <div class="col-md-3"> 
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3>Drag 2</h3></div>
                    </div>
                </div>

                <div class="col-md-3"> 
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3>Drag 3</h3></div>
                    </div>
                </div>

                <div class="col-md-3"> 
                    <div class="panel panel-default">
                        <div class="panel-heading"><h3>Drag 4</h3></div>
                    </div>
                </div>

            </div> 
        </div> <!-- /container full -->
    </body>
</html>