Question

我无法让draggable和droppable在固定大小的容器中工作。这是jsFiddle link。如果我删除div上的类tasks，那么当我尝试将其移动到droppable div时，它可以正常隐藏可拖动项目可见性。请指出我正确的方向。感谢

Answer 1

由于样式中的溢出，被拖动的元素在其父级的边界内受到限制。

您可以使用可拖动元素的helper: "clone"选项来处理此问题。

文档：http://api.jqueryui.com/draggable/#option-helper

代码：

$(function () {

    $(".draggable > li").draggable({
        revert: "invalid",
        cursor: "move",
        containment: "document",
        scroll: false,
        helper: "clone"
    });

    $(".droppable").droppable({
        accept: ".draggable > li",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            ui.draggable.detach().appendTo($(this));
        }
    });
});

在drop函数中有一个函数可以将拖动的元素从原始列表中分离出来并将其附加到新的列表中。

演示：http://jsfiddle.net/IrvinDominin/Fx5TQ/

draggable和droppable不适用于固定大小的容器

1 个答案: