jQuery UI Draggable inside overflow-y: auto; div 问题

Question

我正在使用 jQuery UI 拖放构建一个界面。

我有一系列 flexbox 容器，其中一个包含一个列表，其中的项目可以相互拖放。

列表可以长于页面的可用高度，在这种情况下容器会应用overflow-y: auto;，以便容器的内容可以滚动。

界面正文不应滚动，并设置为100% 高度。

当 .draggable 项目被拖过容器底部时，div 会按照 UI Docs scroll option 滚动。

问题在于，当滚动发生时，它似乎将偏移量添加到helper，因此helper 会从光标下方移开。

这个 JS Fiddle 显示了问题：https://jsfiddle.net/1oqo9tjh/

删除 overflow-y: auto; 可以解决问题，但会破坏我的界面 - 所以我需要保留它。

通过谷歌搜索和阅读其他堆栈溢出答案尝试的解决方案：

• 使用helper: clone;
• 使用position: absolute; 助手
• 使用scroll: true 选项
• 使用refreshPositions: true 选项

可能的解决方案：

• 修改 ui.position 值作为 onDrag 回调的一部分 - 这似乎对我不起作用。

有什么想法吗？提前致谢。

Answer 1

尝试：

在 css 文件中：

body {
  overflow-y: scroll;      
}

在 js 文件中：

  $('body').css('overflowY', 'visible');     
  $("#my_element").draggable();

它适用于我，当我使用时：

 $("#my_element").sortable();