javascript - 不能在克隆元素上删除任何元素

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 上尝试了几种解决方案，但我还没有解决。

标签： javascriptjquery

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>