可拖動李的通過使用JavaScript

Question

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

喜， 會感激你幫助SVG-線連接。
我想創建一個可擴展的列表，其中兒童li的連接到他們的parant-li的槽SVG線。 li -Elements也應該是可拖動的。 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>