Question

我有许多可拖动的图像，我想要克隆然后放到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上（它在页面上可见，但似乎“滑落”了droppable）。有人能告诉我出了什么问题吗？

HTML：

<div class="symbolSource">
<img src="pics/sun.png" alt="Bliss for 'sun'" class="symbol" />
<img src="pics/colour.png" alt="Bliss for 'colour'" class="symbol"  />
<img src="pics/tree.png" alt="Bliss for 'tree'" 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仍然不接受它。

Answer 1

检查#bin和.symbol的z索引。 #bin的z索引应低于.symbol

的z索引

Answer 2

您可能需要查看问题https://stackoverflow.com/a/868002/556856

的答案When I make a draggable clone and drop it in a droppable I cannot drag it again

jQuery droppable div不接受克隆

2 个答案: