Draggable LI, подключенных с помощью SVG-линий с использованием JavaScript

Question

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

привет, оценит вам помощь.
Я хочу создать расширяемый список, в котором дети-li подключены к их собеседнику - li 's через SVG-линию. Элементы li также должны быть перетаскиваемы. Here пример, который близок моему видению.

Здесь мой рабочий код без SVG-линий и неразрушающий li.

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

Вот рабочий пример для вашего зрения. Не все работает так, как вы этого хотите, но я думаю, что вы можете продолжить и решить свою проблему.

Вот фрагмент кода:

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