滚动后 jQuery UI 可拖动不粘在网格上

Question

我正在使用 jQuery UI 的可拖动功能，使用一组 grid选项。我的网格设置为使用 [x: 130, y: 110]约束，并且网格的容器有一定的高度，可以溢出其父级，从而允许我滚动。当我有一个可拖动元素时，我开始拖动它，并在容器中向下滚动一点(同时仍然卡在可拖动元素上)，该元素不再粘在网格上。

我制作了一个显示错误的准系统示例:You can see the error in action in the JSFiddle here - 尝试开始拖动并在容器中滚动。如果这还不足以解释；请参阅错误的 GIF here (它应该留在网格的左上角)。

我尝试将网格更改为 [x: 100, y: 100]这使得它可以在 Chrome 和 Opera 中运行，因为它们每次滚动恰好滚动 100 个像素，但在 Firefox 和 IE 中则不行，因为它们使用软滚动。我还尝试过“破解”它，并在通过 jQuery UI 的 droppable 完成拖动时将元素移动到最近网格的中心。 ，但这似乎不是一个可用的解决方案。

有没有办法确保即使在拖动时向下滚动，可拖动元素也将继续粘在网格上？

Answer 1

对代码的一个小修改，它工作正常。

我用小技巧修改了代码，将最后一个 div 添加为 draggable 元素，即使我们滚动容器，它也始终会捕捉到您的情况下的父级(overflowContainer)。

$( "#draggable" ).draggable({
      containment: '.overflowContainer',
      grid:[100,100],
      refreshPositions: true,      
      scroll: false,
      snap:".innerContent"
   }); 

检查完整的解决方案: https://jsfiddle.net/mayankN/o7ke0pLu/3/