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

Question

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

我做了一个显示错误的准系统示例:您可以在这里看到JSFiddle中的错误 - 尝试开始拖动,并在容器中滚动.如果这还不够解释; 在这里看到错误的GIF (它应该留在网格的左上角).

我已经尝试将网格更改为a [x: 100, y: 100],这使它在Chrome和Opera中工作,因为它们在每个滚动上滚动了100个像素,而不是Firefox和IE,因为它们使用软滚动.我也试过"黑客"我的方式,并通过jQuery UI完成拖动时将元素移动到最近的网格的中心droppable,但这似乎不是一个可用的解决方案.

有没有办法确保即使您在拖动时向下滚动,可拖动元素仍会继续粘在网格上？

Answer 1

对代码进行了一个小修改，它工作得很好。

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

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

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