jquery - 可拖动和可放置不适用于固定大小的容器

Question

我无法在固定尺寸的容器中制作draggable和工作。droppable这是 jsFiddle链接。如果我删除tasksdiv 上的类，那么它会起作用，否则当我尝试将其移动到可放置的 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/