Question

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

喜非常感谢你的帮助我想创建一个可扩展的列表，孩子们 - li通过SVG-Line连接到他们的参与者 - li。 li - 元素也应该是可拖动的。 Here一个与我的愿景相近的例子。

这里我的工作代码没有SVG-Lines和不可分割的li。

    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>

Answer 1

以下是您的愿景的实例。并非一切都按照您的意愿运作，但我认为，您可以继续解决您的问题。

这里是片段：

＆＃13;

$(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();
				} 
			}); 
		}
});

＆＃13;

button {
  position: relative;
  }

＆＃13;

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

＆＃13;

可拖动的LI由SVG-Lines使用JavaScript连接

1 个答案: