无法在克隆的元素上放置任何元素

Question

我正在尝试创建一个类似WordPress的菜单构建器，其中每个菜单项（<li>元素）都是可排序和可拖放的，以便用户能够将任何菜单项拖放到任何其他菜单项上，并且建立任何深度的嵌套菜单。 我可以拖放克隆的菜单项，但是我的问题是我无法在克隆的元素上拖放任何元素。

$( document ).ready(function() {
  $(".main-menu, .sub-menu-1, .sub-menu-2").sortable({		

    connectWith: '.menu-group',
    placeholder: 'drop-placeholder'

  }).disableSelection();



//The problem occurs regarding the HTML below. I clone the `<li>` 
//element and I append it to a `<ul>` element where all `<li>` 
//elements are sortable and dropable. However I am unable to drop 
//any element on cloned elements.


  $('.btn-add-menu-item').click(function(e){
    e.preventDefault(); 

    $(".menu-checkbox").each(function() {
      if($(this).is(':checked')){
        $(this).parents('li').addClass('ui-sortable-handle');
        $(this).next('ul').addClass('sub-menu-1 menu-group ui-sortable');
        $(this).parents('li').clone(true).appendTo('.main-menu');
      }


    });
  });
  
});

.drop-placeholder{
   border: 1px dashed green;
}

.menu-group{
  padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>




<!-- Below is the HTML of new menu items to clone -->
<!-- and add when the button is clicked -->


<ul class = "add-menu">
	<li> 
		<input type = "checkbox" class = "menu-checkbox">New Menu Item 1
		
		<ul class = "new-menu">
			<!-- Here is empty must be dropable to receive <li> elements -->
		</ul>
	
	</li>
	
	
	<li> 
		<input type = "checkbox" class = "menu-checkbox">New Menu Item 2
		
		<ul class = "new-menu">
			<!-- Here is empty must be dropable to receive <li> elements -->
		</ul>
	
	</li>



</ul>

<!-- Click button to add new menu -->
<button class = "btn-add-menu-item">Add menu</button>



<!-- Below HTML where each `<li>` element is sortable and dropable -->


<ul class = "main-menu menu-group">
<!-- cloned <li> elements are appendTo to this <ul> but nothing can be dropped on the cloned element -->
	
	<li>
	
		<div> Main Menu 1 </div>
		
		<ul class = "sub-menu-1 menu-group">
			<li>
				<div> Submenu 1 </div>
				
				<ul class = "sub-menu-2 menu-group">
					<!-- Here is empty but dropable to receive <li> elements -->
				</ul>
			</li>
			
		</ul>
		
	</li>
	
	
	<li>
	
		<div> Main Menu 2 </div>
	
		<ul class = "sub-menu-1 menu-group">
			<li>
				<div> Submenu 2 </div>
				
				<ul class = "sub-menu-2 menu-group">
					<!-- Here is empty but dropable to receive <li> elements -->
				</ul>
			</li>
		
		</ul>
		
		
	</li>


</ul>

我缺少什么，以便可以将其他可放置或可排序的元素放置在克隆的元素上。我已经在SO上尝试了几种解决方案，但没有解决方案。

Answer 1

添加可排序类不能使其可排序，克隆后需要在其上调用.sortable()。像这样：

$( document ).ready(function() {
  $(".main-menu, .sub-menu-1, .sub-menu-2").sortable({		

    connectWith: '.menu-group',
    placeholder: 'drop-placeholder'

  }).disableSelection();



//The problem occurs regarding the HTML below. I clone the `<li>` 
//element and I append it to a `<ul>` element where all `<li>` 
//elements are sortable and dropable. However I am unable to drop 
//any element on cloned elements.


  $('.btn-add-menu-item').click(function(e){
    e.preventDefault(); 

    $(".menu-checkbox").each(function() {
      if($(this).is(':checked')){
        $(this).next('ul').addClass('sub-menu-1 menu-group');
        $(this).parents('li').clone(true).appendTo('.main-menu').sortable({connectWith: '.menu-group',placeholder: 'drop-placeholder'}).find('.sub-menu-1, .sub-menu-2').sortable({connectWith: '.menu-group',placeholder: 'drop-placeholder'});
      }


    });
  });
  
});

.drop-placeholder{
   border: 1px dashed green;
}

.menu-group{
  padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>




<!-- Below is the HTML of new menu items to clone -->
<!-- and add when the button is clicked -->


<ul class = "add-menu">
	<li> 
		<input type = "checkbox" class = "menu-checkbox">New Menu Item 1
		
		<ul class = "new-menu">
			<!-- Here is empty must be dropable to receive <li> elements -->
		</ul>
	
	</li>
	
	
	<li> 
		<input type = "checkbox" class = "menu-checkbox">New Menu Item 2
		
		<ul class = "new-menu">
			<!-- Here is empty must be dropable to receive <li> elements -->
		</ul>
	
	</li>



</ul>

<!-- Click button to add new menu -->
<button class = "btn-add-menu-item">Add menu</button>



<!-- Below HTML where each `<li>` element is sortable and dropable -->


<ul class = "main-menu menu-group">
<!-- cloned <li> elements are appendTo to this <ul> but nothing can be dropped on the cloned element -->
	
	<li>
	
		<div> Main Menu 1 </div>
		
		<ul class = "sub-menu-1 menu-group">
			<li>
				<div> Submenu 1 </div>
				
				<ul class = "sub-menu-2 menu-group">
					<!-- Here is empty but dropable to receive <li> elements -->
				</ul>
			</li>
			
		</ul>
		
	</li>
	
	
	<li>
	
		<div> Main Menu 2 </div>
	
		<ul class = "sub-menu-1 menu-group">
			<li>
				<div> Submenu 2 </div>
				
				<ul class = "sub-menu-2 menu-group">
					<!-- Here is empty but dropable to receive <li> elements -->
				</ul>
			</li>
		
		</ul>
		
		
	</li>


</ul>