1

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

我有 2 个可排序的列表：

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

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

  • 如果用户丢弃了新元素：将新元素插入槽中
  • 如果用户取消放置：将先前插入槽的元素移回槽中（原样）

这种行为应该重复，直到用户取消拖动或将元素放入槽或桶中。

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

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

编辑1：这是我到目前为止的一个例子

$(".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);
        }
    }
});
4

0 回答 0