So verbinden Sie div mit flexibler Leitung

Ich habe einige dynamisch ziehbare DIVs und möchte die DIVs durch flexible dynamische Linien miteinander verbinden. Die Linie sollte dynamisch verbindbar oder entfernbar sein. Wie kann ich mein Ziel erreichen?
Ich möchte auch eine Aktion auf Connect/remove-Ereignis durchführen.So verbinden Sie div mit flexibler Leitung

Im Folgenden habe ich versucht, meine Situation durch das Bild zu beschreiben:

Das Endziel ist so etwas wie dieses, um Ihnen eine Vorstellung zu geben:

Wie ich diese Art tun können der flexiblen Leitung durch die svg oder flexbox oder jQuery oder CSS Trick? Bitte schlage irgendeinen Weg vor, um dieses Ziel zu erreichen.

Mein aktueller HTML/CSS/JS sieht ungefähr wie folgt aus:

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

Quelle

2017-07-21 Tester

Sie besser diese flexible Leitung in Photoshop erstellen und setzen Sie sie dann als image.if Sie es schaffen wollen in css bedeutet nur, dass Sie für SVG gehen müssen, die wenig komplex ist – codegeek

Aber ich möchte ein Ereignis (wie Datenbankeintrag, wenn zwei div verbinden oder trennen zwei div) wenn Punkt zwei div OR dis-Punkt zwei div – Tester

So sollte es nur sein eine Linie, die die zwei divs miteinander verbindet, irgendwie wie eine Kette, sind sie durch eine Kette verbunden? Und diese Linie/Kette darf nicht gerade sein, sie sollte gekrümmt sein. Und hat diese Kurve einen praktischen Zweck oder dient sie nur der Ästhetik? – myfunkyside

prüfen diese Demo. Ich hoffe, es hilfreich ist für Ihr Ziel

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

Für weitere Details erreichen Sie besuchen http://www.freedevelopertutorials.com/jsplumb-tutorial/ ODER https://jsplumbtoolkit.com

Quelle

2017-07-26 06:26:54

So verbinden Sie div mit flexibler Leitung

Antwort

Verwandte Themen