Ziehbare der LI verbunden durch SVG-Linien mit JavaScript

Question

following is the image of till now done want to connect those parent and child ul li

hallo, Sie wird erkennen helfen.
Ich möchte eine erweiterbare Liste erstellen, in der die Kinder li über eine SVG-Leitung an ihre parant-li angeschlossen sind. Die li -Elemente sollten auch ziehbar sein. Here ein Beispiel, das meiner Vision nahekommt.

Hier mein Arbeitscode ohne die SVG-Linien und unverkäuflich li 's.

var chidID = 0; \t \t 
 
\t $('body').on('click', '.ul-appending', function() { 
 
\t \t var levelID = $(this).attr('data-levelnumber'); 
 
\t \t var parentID = $(this).attr('data-parentNumber'); 
 
\t  createNode(levelID,parentID,chidID,this); 
 
\t \t //getParent(this); 
 
    }); 
 
    function createNode(levelID,parentID,chidID,elem){ 
 
\t  console.log(levelID,parentID,chidID); 
 
\t \t levelID++; 
 
\t \t parentID++; 
 
\t \t $(elem).parent().append(
 
\t \t \t $('<ul>').addClass('newul') 
 
\t \t \t .append(
 
\t \t \t \t $('<li>') 
 
\t \t \t \t .append(
 
\t \t \t \t \t $('<button>').addClass('ul-appending').text("Add UL").addClass('marginBottomUl').attr('data-parentNumber',parentID).attr('data-levelnumber',levelID) 
 
\t \t \t \t) 
 
\t \t \t) 
 
\t \t); \t 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
\t <ul> 
 
\t \t <li><button class="ul-appending" data-parentNumber='0' data-levelnumber='0'>Main Parent</button>  </li> 
 
    </ul> 
 
</div>

Answer 1

Hier ist ein funktionierendes Beispiel für Ihre Vision. Nicht alles funktioniert so, wie Sie es möchten, aber ich denke damit können Sie weitermachen und Ihr Problem lösen.

Hier Snippet:

$(document).ready(function(){ 
 
\t var chidID = 1; 
 

 
\t $('body').on('click', '.ul-appending', function() { 
 
\t \t 
 
\t \t var levelID = $(this).attr('data-levelnumber'); 
 
\t \t var parentID = $(this).attr('data-parentNumber'); 
 
\t \t chidID++; 
 
\t \t createNode(levelID,parentID,chidID,this); 
 
\t \t //getParent(this); 
 
\t }); 
 

 
\t function createNode(levelID,parentID,chidID,elem){ 
 
\t \t \t levelID++; 
 
\t \t \t parentID++; 
 
\t \t \t 
 
\t \t \t var btnNew = $('<button>').addClass('ul-appending').text("Add UL").addClass('marginBottomUl').attr('data-parentNumber',parentID).attr('data-levelnumber',levelID).attr("id", chidID); 
 
\t \t \t $(elem).parent().append(
 
\t \t \t \t $('<ul>').addClass('newul') 
 
\t \t \t \t .append(
 
\t \t \t \t \t $('<li>') 
 
\t \t \t \t \t .append(
 
\t \t \t \t \t \t btnNew 
 
\t \t \t \t \t \t) 
 
\t \t \t \t \t) 
 
\t \t \t \t); 
 
\t \t \t \t \t 
 
\t \t var mySVG = $('body').connectSVG(); 
 
\t \t mySVG.drawLine({ 
 
\t \t \t left_node:'#'+$(elem).prop("id"), 
 
\t \t \t right_node:'#'+chidID, 
 
\t \t \t horizantal_gap:10, 
 
\t \t \t error:true, 
 
\t \t \t width:1 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t $( '#'+$(elem).prop("id") ).draggable({ 
 
\t \t \t cancel: false, 
 
\t \t \t drag: function(event, ui){ 
 
\t \t \t \t mySVG.redrawLines(); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
     
 
\t \t $( '#'+chidID ).draggable({ 
 
\t \t \t cancel: false, 
 
\t \t \t drag: function(event, ui){ 
 
\t \t \t \t mySVG.redrawLines(); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 
});

button { 
 
    position: relative; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-To-Connect-Two-Html-Elements-with-A-Line/required/script/jquery.svg.min.js"></script> 
 
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-To-Connect-Two-Html-Elements-with-A-Line/required/script/jquery.connectingLine.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li><button id="1" class="ul-appending" data-parentNumber='0' data-levelnumber='0'>Main Parent</button> 
 
    </li> 
 
    </ul> 
 
</div>