Draggable LI's connected by SVG-Lines using JavaScript

Question

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

hi, will appreciate you help.
I want to create a extendable list, in wich the children-li's are connected to their parant-li's trough a SVG-Line. The li-Elements should also be draggable. Here an example, which is close to my vision.

Here my working code without the SVG-Lines and undraggable li's.

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

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

What exactly is your issue? The code works fine on my machine — Andy, Jan 02 '17 at 12:34
@andy appending child to that parent is working fine i want to connect those childs for respective parent with a line.so i am not able to do that — Narayan Padhi, Jan 02 '17 at 12:48
@NarayanPadhi if your code is not working properly make sure you are running your javascript with a server like WAMP. Or use Mozilla. Chrome sometimes doesn't load javascript from localhost, which might be ur problem. — 404answernotfound, Jan 02 '17 at 13:34
@mnemosdev i am not running this on any server its normal html page with jquery — Narayan Padhi, Jan 02 '17 at 15:05
@NarayanPadhi that's exactly why I'm telling you to open the html page with MOZILLA instead of CHROME. Chrome blocks localhost javascript most of the time. USE MOZILLA and let us know. — 404answernotfound, Jan 02 '17 at 15:07

Andy · Answer 1 · 2017-01-03T12:48:39.820

1

Here's a working example for your vision. Not everything works as you want it to, but I think with that, you can go on and solve your issue.

Here the snippet:

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

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

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

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>

edited Jan 03 '17 at 12:48

answered Jan 02 '17 at 13:18

Andy

393
3
16

HI @andy, thanks for the suggestion actually i want to connect parent child with flexible svg line so was thiniking to go through with javascript or jquery to get same functionality . – Narayan Padhi Jan 02 '17 at 13:33
var mySVG = $('body').connect(); mySVG.drawLine({ left_node:'.node1', right_node:'.node2', horizantal_gap:10, error:true, width:1 }); $( ".node1" ).draggable({ drag: function(event, ui){mySVG.redrawLines();} }); $( ".node2" ).draggable({ drag: function(event, ui){mySVG.redrawLines();} }); "this is svg code in which left node is parent node and right node is the child node" – Narayan Padhi Jan 02 '17 at 13:34
So you want it to be done with only svg-Lines? And what do you mean with _flexible svg line_? Please edit your question that this is clear for everyone – Andy Jan 02 '17 at 13:45
HI andy, https://jsplumbtoolkit.com/demos/toolkit/paths/index.html this is the demo of exactly what i want but in a dynamic way. if you can suggest any other option rather than using svg it would be great help. – Narayan Padhi Jan 02 '17 at 13:48
Ahh, sorry but that was not clear when I read your question. Should the `li`-Elements in your version be draggable? – Andy Jan 02 '17 at 13:52
sorry for not mentioning it in the questin ya it is draggable. – Narayan Padhi Jan 02 '17 at 13:55
Hi andy ,just need those left node id and right node by traversing and the error will be solved. – Narayan Padhi Jan 02 '17 at 14:07
which library do you use? I'll update my answer in that case – Andy Jan 02 '17 at 14:19
using standard jquery library for this purpose. – Narayan Padhi Jan 02 '17 at 14:35
i will share the plugin url to you http://www.jqueryscript.net/other/jQuery-Plugin-To-Connect-Two-Html-Elements-with-A-Line.html – Narayan Padhi Jan 02 '17 at 14:56
@NarayanPadhi Glad to hear that :) Please mark the answer as accepted in order to close the question – Andy Jan 03 '17 at 14:28

Draggable LI's connected by SVG-Lines using JavaScript

1 Answers1