Question

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

然而，源div有时会超出屏幕的高度，所以我需要添加一个垂直滚动条。在这里，我遇到了臭名昭着的溢出问题。

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

我去过W3和一些StackOverflow问题，我意识到这不是一个bug而是预期的行为（虽然为什么这个意图超出了我的意思）。但是，我还没有找到适合我的解决方案。

我尝试在源代码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

尝试此修复程序。我编辑了你的功能见下文。我在draggable上添加了“containment”选项。

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

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

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

3 个答案: