jQuery UI Droppable - 如何每个放置区仅允许1个元素，而不是堆叠

Question

我当前的脚本：https://jsfiddle.net/uoyp37bj/11/

问题在于，目前可以通过将可放置元素拖放到彼此之上来“堆叠”可放置元素。我试图让它只有最新掉落的元素留在那里，之前的所有元素都被移除了。

我最初只是使用CSS“隐藏”其他项目，但由于我正在使用输入框来跟踪放置区域中存在哪些项目，因此不再可能。任何帮助都会非常感激，希望它在jQuery UI API中相对简单，但目前没有什么对我有用。

<a class="dropbtn">image</a>

刚想了一下，但还没有进展 - 可以迭代“drop”调用中的所有元素，并删除任何重复项。在这个循环中，还可以检查是否有任何拖放区域有2个元素并删除除1之外的所有元素。不确定如何编写脚本，但初始逻辑对我来说很有意义。

Answer 1

不要将draggable附加到droppable，而是将其整个内容替换为可拖动的内容，如下所示：

$(this).html(ui.draggable.clone(true).css({
  position: 'relative',
  top: 'auto',
  left: 'auto'
}));

而不是：

 $(ui.draggable).clone(true).detach().css({
  position: 'relative',
  top: 'auto',
  left: 'auto'
}).appendTo(this);