ドラッグ可能LIのJavaScript

Question

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

を使用してSVG-線で接続がhi、 はあなたを助ける感謝します。
子どものliは、SVG-Lineを経由してliの子孫に接続されている拡張可能なリストを作成したいと考えています。 li - 要素もドラッグ可能でなければなりません。 Here私のビジョンに近い例です。

私の作業コードはSVG-Linesとundraggableなしで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>