jQuery droppable div不接受克隆

Posted 2023-05-08

【中文标题】jQuery droppable div不接受克隆

【英文标题】：jQuery droppable div not accepting clone

【发布时间】：2012-06-16 12:44:39

【问题描述】：

我有许多可拖动的图像，我想克隆它们然后放到一个 div 上，并且可以选择在放置后重新定位和添加新的克隆。在浏览了这个网站后，我将其范围缩小到以下代码：

function init() 

$("#bin").droppable(
  accept: '.symbol',
  drop: function(event, ui) 
      $(this).append($(ui.helper).clone());
      $("#bin .symbol").addClass("item");
      $(".item").removeClass("ui-draggable symbol");
      $(".item").draggable();
  
); 
$(".symbol").draggable(
  helper: 'clone',
  grid: [20, 50]
);

这似乎可行，但现在在拖动克隆时，它甚至不会出现在可放置的 div 上（它在页面上可见，但随后似乎“滑入”可放置的 div 下）。谁能告诉我出了什么问题？

html：

<div class="symbolSource">
<img src="pics/sun.png"  class="symbol" />
<img src="pics/colour.png"  class="symbol"  />
<img src="pics/tree.png"  class="symbol" />
</div>
<div id="bin" ></div>  

CSS：

.symbolSource 
    padding: 0px 0;    
    margin: 20px;
    width: 100%;
    height: 150px;
    float: left;
    overflow: scroll;


#bin 
  background: #eee;
  height: 300px;
  width: 100%;
  position: relative;
  margin-top: 220px;

编辑： 克隆不再消失，但 div 仍然不会接受它。

【问题讨论】：

请提供更多细节，给我们 HTML 和 CSS 代码。

【参考方案1】：

检查#bin 和.symbol 的z-index。 #bin的z-index应该低于.symbol的z-index

【参考方案2】：

您可能想查看https://***.com/a/868002/556856 问题When I make a draggable clone and drop it in a droppable I cannot drag it again 的答案