How to connect div with flexible line

Question

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>

You better create this flexible line in photoshop and then insert it as a image.if you want to create it in css only means you need to go for SVG which is little complex — yasarui, Jul 21 '17 at 05:25
But I want to perform some event(Like database entry when connect two div or disconnect two div) when point two div OR dis-point two div — Tester, Jul 21 '17 at 05:28
So there should just be a line binding the two divs together, kinda like a chain, they are connected by a chain? And this line/chain is not allowed to be straight, it should be curved? And does this curve have a practical purpose, or is it just for esthetics? — myfunkyside, Jul 21 '17 at 05:33
Yes, something like this. But line dynamically curved as per div move. it's also one type of decision making hierarchy — Tester, Jul 21 '17 at 05:36
1) yes, it's connected by chain 2) It's not compulsory to curved, depends on div move (flexible line) 3) Not more clear with your question but i have give example as i image — Tester, Jul 21 '17 at 05:43
Please check this for more idea about my situation https://www.awesomescreenshot.com/image/2675956/6a960d4090352a807797b09b10b0d21c — Tester, Jul 21 '17 at 05:46
I think your best option is `svg` lines dynamically created/updated in JS, shouldn't be incredibly hard since you can use the connect points' coordinates for the svg points, use sinus for the curve. I'm not saying it's super-easy, but with some puzzling you should be able to get there. — myfunkyside, Jul 21 '17 at 06:27

score 2 · Answer 1 · answered Jul 26 '17 at 06:26

Check this demo. i hope it's helpful for achieve your goal

<!DOCTYPE html>
<html>
    <head>
        <title>JS plumb test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
        <!--<script type="text/javascript" src="./include/jquery.jsPlumb-1.3.16-all-min.js"></script>-->
        <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
        <style>
            .window { 
                background-color: #EEEEEF;
                border: 1px solid #346789;
                border-radius: 0.5em;
                box-shadow: 2px 2px 5px #AAAAAA;
                color: black;
                height: 5em;
                position: absolute;
                width: 5em;
            }

            .window:hover { 
                box-shadow: 2px 2px 19px #AAAAAA;
                cursor: pointer;
            }


            .button_add, .button_add_window, .button_remove, .button {
                background-color: deepskyblue;
                text-align: center;
                border: 1px solid;
            }

            .button_container {
                margin: 5px;
                background-color: #aaaaaa
            }

            svg.fs-connector path {
                stroke: lightgray;
                fill: lightgray;
                stroke-width: 3;
            }

            svg.fs-connector-hover path {
                stroke: gray;
                fill: gray;
                stroke-width: 3;
            } 
        </style>

        <script>

            jsPlumb.ready(function () {

                //all windows are draggable
                jsPlumb.draggable($(".window"), {
                    drag: function (event, ui) { //gets called on every drag
                        console.log(ui.position);  //ui.position.left and ui.position.top
                    }});

                var anEndpointSource = {
                    endpoint: "Rectangle",
                    isSource: true,
                    isTarget: false,
                    maxConnections: -1,

                    anchor: [1, 0, 1, 0]
                };

                var anEndpointDestination = {
                    endpoint: "Dot",
                    isSource: false,
                    isTarget: true,
                    maxConnections: -1,
                    connectorStyle: {
                        dashstyle: "2 4"
                    },
                    anchor: [0, 1, -1, 0]
                };
                var parentnode1 = $(("#container0"));

                jsPlumb.addEndpoint(
                        parentnode1, {
                            /* Connector(Line)-Style */
                            connectorStyle: {strokeStyle: "blue", lineWidth: 1},
                            connectorHoverStyle: {lineWidth: 2},
//                            connectorOverlays: [
//                                ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
//                                ["Label", {label: "foo", id: "label"}]
//                            ]

                        },
                        anEndpointSource,
                        );

                jsPlumb.addEndpoint(
                        parentnode1, {
                            /* Connector(Line)-Style */
                            connectorStyle: {strokeStyle: "blue", lineWidth: 1},
                            connectorHoverStyle: {lineWidth: 2},
//                            connectorOverlays: [
//                                ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
//                                ["Label", {label: "foo", id: "label"}]
//                            ]

                        },
                        anEndpointDestination,
                        );

                fixEndpoints(parentnode1);

                //Fixes endpoints for specified target
                function fixEndpoints(parentnode) {

                    //get list of current endpoints
                    var endpoints = jsPlumb.getEndpoints(parentnode);

                    //there are 2 types - input and output

                    var inputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                        return elementOfArray.isSource; //input
                    });

                    var outputAr = $.grep(endpoints, function (elementOfArray, indexInArray) {
                        return elementOfArray.isTarget; //output
                    });

                    calculateEndpoint(inputAr, true);
                    calculateEndpoint(outputAr, false);

                    jsPlumb.repaintEverything();
                }

                //recalculate endpoint anchor position manually
                function calculateEndpoint(endpointArray, isInput) {

                    //multiplyer
                    var mult = 1 / (endpointArray.length + 1);

                    for (var i = 0; i < endpointArray.length; i++) {

                        if (isInput) {

                            //position
                            endpointArray[i].anchor.x = 1;
                            endpointArray[i].anchor.y = mult * (i + 1);
                        } else {

                            //position
                            endpointArray[i].anchor.x = 0;
                            endpointArray[i].anchor.y = mult * (i + 1);
                        }
                    }
                }



                //Add additional anchor
                $(".button_add").live("click", function () {

                    var parentnode = $(this)[0].parentNode.parentNode;

                    jsPlumb.addEndpoint(
                            parentnode,
                            anEndpointSource
                            );

                    jsPlumb.addEndpoint(
                            parentnode,
                            anEndpointDestination
                            );

                    fixEndpoints(parentnode);
                });

                //Remove anchor 
                $(".button_remove").live("click", function () {

                    var parentnode = $(this)[0].parentNode.parentNode;

                    //get list of current endpoints
                    var endpoints = jsPlumb.getEndpoints(parentnode);

                    //remove 2 last one

                    if (endpoints.length > 1) {
                        jsPlumb.deleteEndpoint(endpoints[endpoints.length - 2]);
                    }

                    if (endpoints.length > 0) {
                        jsPlumb.deleteEndpoint(endpoints[endpoints.length - 1]);
                    }

                    fixEndpoints(parentnode);
                });

                //adds new window
                $(".button_add_window").click(function () {
                    var id = "dynamic_" + $(".window").length;
                    var tagName = "Tag - " + $(".window").length;
                    //create new window and add it to the body
                    $('<div class="window" id="' + id + '" >').appendTo('body').html($(("#container0"))[0].innerHTML);
                    //set jsplumb properties
                    jsPlumb.draggable($('#' + id), {
                        drag: function (event, ui) { //gets called on every drag
                            console.log(ui.position);  //ui.position.left and ui.position.top
                        }});
                    $('#' + id).html(tagName);
                    var parentnode = $('#' + id);
                    jsPlumb.addEndpoint(
                            parentnode, {

                                /* Connector(Line)-Style */
                                connectorStyle: {strokeStyle: "green", lineWidth: 1},
                                connectorHoverStyle: {lineWidth: 2},
//                                connectorOverlays: [
//                                    ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
//                                    ["Label", {label: "foo", id: "label"}]
//                                ]

                            },
                            anEndpointSource
                            );
                    jsPlumb.addEndpoint(
                            parentnode, {
                                /* Connector(Line)-Style */
                                connectorStyle: {strokeStyle: "green", lineWidth: 1},
                                connectorHoverStyle: {lineWidth: 2},
//                                connectorOverlays: [
//                                    ["Arrow", {width: 10, length: 30, location: 1, id: "arrow"}],
//                                    ["Label", {label: "foo", id: "label"}]
//                                ]

                            },
                            anEndpointDestination
                            );
                    fixEndpoints(parentnode);
                });
            });
        </script>

    </head>
    <body >

        <!-- Adds new windows to the page -->
        <div class="window" style="left: 600px" id="details">
            <p style="text-align: center">Window</p>
            <div class="button_container">
                <div class="button_add_window">Add</div>
            </div>
        </div>

        <!-- Primary window - used as html templated for descendants -->
        <div class="window" style="left: 20px" id="container0">
            Tag - 1 
            <!--            <div class="button_container">
                            <div class="button_add">Add</div>
                            <div class="button_remove">Remove</div>
                        </div>-->
        </div>

        <!--    <div class="window" style="left: 200px" id="container1">
            </div>-->


    </body>
</html>

For more detail you can visit http://www.freedevelopertutorials.com/jsplumb-tutorial/ OR https://jsplumbtoolkit.com

Yashvantsinh Zala your example is very great can you help me achieve this ? https://stackoverflow.com/questions/51120991/flow-based-programing-js-html-ui/51121185?noredirect=1#comment89437643_51121185 — user3548161, Jul 08 '18 at 07:33

How to connect div with flexible line

1 Answers1