如何用柔性线连接div [重复]答案

【问题标题】：How to connect div with flexible line [duplicate]如何用柔性线连接div [重复]
【发布时间】：2017-12-27 00:36:30
【问题描述】：

我有一些动态可拖动的 DIV，我想通过灵活的动态线将 DIV 相互连接起来。线路应该是动态可连接或可移动的。那么我该如何实现我的目标呢？
我还想对连接/删除事件执行操作。

下面我尝试通过图片描述我的情况：

最终目标是这样的，给你一个想法：

如何通过svg 或flexbox 或jQuery 或CSS 技巧来实现这种类型的灵活线路？请任何人提出任何实现此目标的方法。

我当前的 HTML/CSS/JS 看起来像这样：

<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>

【问题讨论】：

你最好在 photoshop 中创建这条灵活的线条，然后将其作为图像插入。如果你想在 css 中创建它，只意味着你需要使用简单的 SVG
但是我想在指向两个 div 或取消指向两个 div 时执行一些事件（例如连接两个 div 或断开两个 div 时的数据库条目）
所以应该只有一条线将两个div绑定在一起，有点像链子，它们是通过链子连接的？而且这条线/链不允许是直的，它应该是弯曲的？而且这条曲线有实际用途，还是只是为了美观？
是的，像这样。但是线条会随着 div 的移动而动态弯曲。它也是一种决策层次结构
@myfunkyside 你对 mautic 工具有什么想法吗？

标签： jquery html css svg flexbox

【解决方案1】：

查看此演示。希望对你的目标有所帮助

<!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>

【讨论】：

Yashvantsinh Zala 你的例子非常棒你能帮我实现这个吗？ stackoverflow.com/questions/51120991/…