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

【问题标题】：draggable and droppable not working on fixed size containers可拖动和可放置不适用于固定大小的容器
【发布时间】：2013-08-17 07:45:41
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui draggable droppable

【解决方案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/

【讨论】：