jQuery 用户界面 : Drag and Drop : Deal with several containers and overflow property

Question

我完全陷入了拖放问题:我需要能够将位于第 1 行的单元格中的黄色方 block 拖到第 3 行的单元格之一中。

我做了一个小的JS Bin示例here

我的限制是所有单元格都必须具有“溢出”属性，因为单元格可以有大量黄色方 block 。

我尝试将属性“clone/original”和“AppendTo”应用于可拖动元素，但我无法处理也具有属性溢出的主容器滚动条。

欢迎任何帮助!

Answer 1

为了能够将元素拖动到另一个表格单元格，您需要将“helper”选项设置为“clone”。

$(this).draggable({
    opacity: 0.7,
    helper: 'clone',
    scroll: false
});

现在，在 droppable 的“drop”事件中，ui.draggable 是被拖动的元素。您需要做什么才能将其附加到可删除项。

$(this).droppable({
    ...
    drop: function(event, ui) {
        $(this).addClass("cell-dropped");
        // "ui.draggable" is the element being dragged
        // "this" is the droppable element
        $(ui.draggable).appendTo(this);
    }
});

对于容器 DIV 的滚动，您必须显式地将其 css 位置值设置为相对:

.container{
    ...
    position: relative;
}

<强> DEMO