jqueryUI 可排序/可拖动和溢出（或 z-index？） - 不一致的行为

Posted 2023-05-08

【中文标题】jqueryUI 可排序/可拖动和溢出（或 z-index？） - 不一致的行为

【英文标题】：jqueryUI sortable/draggable and overflow (or z-index?) - inconsistent behaviour

【发布时间】：2012-03-31 03:08:45

【问题描述】：

我正在处理的页面中的 jqueryUI 可排序和溢出属性存在问题 - 我已将它的一个版本放在我的公共保管箱中：http://dl.dropbox.com/u/846812/stage_edit/stage_edit.html

如果您抓住右侧容器中的一个蓝色框（通过灰色条将其拾起），您可以将其拖到左侧（或右侧）并保持可见。但是，如果您从左侧抓住其中一个框并将其拖出，它会隐藏在右侧的后面，或者至少在它越过时您看不到它。此外，左侧容器 (#droppable-stage) 沿 x 扩展以将框保留在内部，即使它位于右侧 (#droppable-resource-list) 的“下方”。

它在那里，因为您可以看到灰色框显示它会出现的位置，当您放下它时，它会出现在右侧。只是在拖拽的状态下是看不到的。

我无法弄清楚为什么会发生这种情况，尤其是为什么右翼和左翼会有所不同。我不知道问题出在 css 还是 jquery-ui 可拖动/可排序的 javascript 上。我尝试通过使用 css 解决它无济于事 - 例如，如果我将 style="overflow:visible;" 放在 #droppable-stage 上，那么拖动工作正常，但我失去了 y 溢出：即资源 div（蓝色和绿色框）从底部溢出。

我尝试将 overflow-x 设置为可见，将 overflow-y 设置为 auto，我认为这意味着我可以将蓝色框拖到两侧，但左侧仍有一个滚动条，但这不起作用：奇怪的是，它似乎是特别是溢出-y 属性，它决定了我是否可以将一个框拖到左侧或右侧，这对我来说没有意义。

有什么想法吗？

【问题讨论】：

它们在 html 文档中的写入顺序会影响这种行为吗？

有一个可拖动的滚动选项，也许你可以开始看那里？ docs.jquery.com/UI/Draggable#option-scroll（从那里：***.com/questions/811037/…）

@Kristian - 不，只是做了一个实验并交换了 div#resources-container 和 div#droppable-stage 。还是一样的，只是换了一轮，即左手现在可以工作，右手不行。所以问题肯定出在 div#droppable-stage 上。

@Bathz 好地方，谢谢，但似乎没有帮助：/

【参考方案1】：

不是右边的容器有更高的 z 索引或任何东西，而是左边的容器被设置为包含元素并在必要时通过overflow: auto; 属性滚动。

当我更改 div#droppable-stage 上的可见属性 overflow: visible; 时，抓取的 droppable 不再出现退出左列空间的问题

【讨论】：

谢谢克里斯蒂安 - 正如我在问题中所说，我尝试了那个确切的东西，并且修复了拖动但也删除了垂直滚动条，这样我就无法再访问底部的资源了列表（向下滚动页面以查看我的意思）。正是这导致我为overflow-x 和overflow-y 设置了不同的值，但这也无济于事。

下一个合乎逻辑的步骤，恕我直言，然后是搞乱主动抓取项目的实际显示属性。在查看源代码时，我看到它是 position: absolute;为什么不尝试将抓取的项目设置为位置：固定；代替？

尝试通过添加此样式规则 .ui-sortable-helper position: fixed !important; （在拖动项目时 jquery-ui 添加 ui-sortable-helper 类），这确实使它在 rhs 中可见，但也使得当您拖动它时，它会出现在与鼠标不同的位置。感觉我们越来越近了……

如果相对于鼠标的偏移不正确，您现在可以调整主动拖动项的边距来纠正它。我不确定这是否被认为是一个骇人听闻的解决方案……拖放本身就很骇人听闻..