使用滚动条从 div 拖放 - 溢出-y 滚动 VS 溢出-x 可见

Question

我已经设置了从一个 div 到另一个 div 的 jQuery 拖放，它工作正常。

但是，源 div 有时会超出屏幕的高度，因此我需要为其添加一个垂直滚动条。这是我遇到臭名昭著的溢出问题的地方。

该 div 需要具有 overflow-x: visible 以便拖动的元素在移动到目标 div 时可见。但是，当我将 overflow-y: scroll 或 overflow-y: auto 添加到源 div 时，突然 overflow-x 不再起作用了。

我去过 W3 和一些 StackOverflow 问题，我意识到这不是错误，而是预期的行为（尽管为什么这是预期的超出了我的范围）。但是，我还没有找到适合我的解决方案。

我尝试像一些建议的答案一样将包装器 div 添加到源 div，然后执行以下操作：

.wrapper {
    width: 100px;
    position: absolute;
    top: 4vw;
    left: 0;
    bottom: 4vw;
    overflow-y: auto;
}

.source {
    position: relative;
    overflow: visible;
    z-index: 2;
}

<div class="wrapper">
    <div class="source">
        <!-- draggable elements go here -->
    </div>
</div>

<div class="target">
    <!-- draggable elements drop here -->
</div>

但是，尽管现在源 div 的溢出没问题，包装器仍然隐藏了水平溢出。我想我可以将包装器的宽度增加到全屏并使背景不可见并使屏幕上的其他所有内容具有更高的 z-index 以便不在包装器后面，但这似乎是一个非常糟糕的解决方案简单的问题。

谁能帮帮我？

如果 CSS 解决方案不实用，谁能提供一些可能解决问题的 Javascript？

代码示例：jsfiddle

Answer 1

请检查以下内容。如果您想拖动元素并将它们“放置”到您的战斗位置，您可能需要将helper: "clone" 与appendTo: "body" 或任何其他将放置您的物品的选择器结合使用。我还添加了containment: 'window' 和scroll: false（不太确定最后一个是否是您想要的）。

function make_draggable(elem){
    $(elem).draggable({
        revert: "invalid",
        cursor: "move",
        helper: 'clone',
        appendTo: 'body',
                    containment: 'window',
        scroll: false,
    });
}

还有一些 CSS 修复，所以你的样式仍然适用于可拖动的克隆，并且你的身体实际上覆盖了整个区域（因为你唯一的孩子是绝对定位的，所以我们需要强制 body 覆盖整个高度/宽度）

https://jsfiddle.net/9ush466w/6/

编辑：在原始元素上添加自定义类并将其删除，以便您可以向用户显示反馈。 https://jsfiddle.net/9ush466w/8/

Answer 2

我知道这不完全是您问题的答案，但您正在使项目可拖动。查看您的示例，我认为您应该查看连接列表：

jqueryui connect lists documentation

这允许您从一个列表中取出一个项目，然后将其放入另一个列表中。

这是我找到的一个演示 jsfiddle：

connect lists fiddle demo

Answer 3

试试这个修复。我编辑了你的功能，见下文。我在可拖动对象上添加了“遏制”选项。

function make_draggable(elem){
        $(elem).draggable({
            revert: "invalid",
            cursor: "move",
            containment: ".unit-holder-middle" 
        });
    }

这是你想要的吗？看到这个 jsfiddle https://jsfiddle.net/9ush466w/2/