jquery ui可拖动临时元素在拖动期间交换

Question

我需要在大小有限的jquery ui可排序列表中实现临时拖动替换。

我有2个可排序列表：

• 只有1个点来容纳单个元素的“插槽”
• 一个“存储桶”，其中包含多个元素，用户可以从中选择任何元素以填充“插槽”

用户必须将元素从存储桶拖入插槽。当用户使用鼠标悬停在插槽上时，如果插槽已被占用，则应将当前的插槽元素移动到存储桶中，以便为拖动的元素提供视觉空间。然后用户有两个选项：

• 如果用户删除新元素：将新元素插入插槽
• 如果用户取消了丢弃：将之前的有槽元素移回插槽（原来是这样）

此行为应重复，直到用户取消拖动或将元素放入插槽或存储桶中。

为了在视觉上将插槽限制为单个元素，我将其限制为单个元素的确切高度，并将其溢出设置为隐藏。

不幸的是，我一直无法在插槽中保留单个元素时产生效果。

编辑1：Here is an example of what I have so far

$(".slot").bind("sortchange", function (event, ui) {
    var slot = $(event.target);
    var bucket = $(".bucket");

    // Move any element already in the slot (other than the currently
    // dragged element) into the bucket
    var slotElements = slot.children(".item").not(ui.item);
    if (slotElements.length > 0) {
        for (var idx = 0; idx < slotElements.length; idx += 1) {
            var element = $(slotElements[idx]);
            moveAnimate(element, bucket);
        }
    }
});