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

我已经设置jQuery拖放从一个div到另一个div，它工作正常。从div滚动条拖放 - 溢出-y滚动VS溢出-x可见

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

div需要具有overflow-x：visible，以便拖动元素在被移动到目标div时可见。但是，当我将overflow-y：scroll或overflow-y：auto添加到源div时，突然溢出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

来源

2016-08-08 jovan

你可以来复制此问题 –

这里有一个小提琴小提琴：https://jsfiddle.net/9ush466w/ – jovan

请检查以下内容。如果你想拖动元素并将它们放在战斗位置上，你可能想要使用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修复让你的风格仍然适用于可拖动克隆，你的身体实际上涵盖整个区域（因为你的独生子女positionated绝对的，所以我们需要强制body覆盖全高/宽）

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

编辑：添加自定义类和原始的元素上移除，以便可以显示反馈给用户。 https://jsfiddle.net/9ush466w/8/

来源

2016-08-11 11:38:05

克隆工作正常，但我宁愿尽可能避免。有没有办法克隆并添加一些代码来让原始元素消失，但是如果元素被丢弃到目标区域之外，会再次出现？让它消失不应该是一个问题，但我不确定我会在哪里添加最后一部分。 – jovan

刚刚编辑，尝试在https://jsfiddle.net/9ush466w/8/ –

新的小提琴我看你是如何添加/删除额外的类到原始元素。只剩下一个小问题 - 当我用'display：none'替换'background：＃ddd'时，它不会使元素消失：https://jsfiddle.net/9ush466w/9/任何想法？在此之后，很高兴奖励赏金。 – jovan

我知道这是不完全的回答你的问题，但你做的项目拖动。看你的样品，我想你应该考虑连接列表：

jqueryui connect lists documentation

这样就可以采取从一个列表中的项目，并将其拖放到另一个。

这里是一个演示的jsfiddle我发现：

connect lists fiddle demo

来源

2016-08-11 10:29:14

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

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

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

来源

2016-08-11 11:23:14

我想相反:)在您的例子可拖动的元素甚至不能离开箱子，我需要他们离开它（在我的版本中工作），并可见（不工作在我的版本）。 – jovan

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

回答

相关问题