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

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

我做了一个显示错误的准系统示例：You can see the error in action in the JSFiddle here – 尝试开始拖动,并在容器中滚动.如果这还不够解释;看到错误here的GIF(它应该保留在网格的左上角).

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

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

解决方法

一个关于代码的小黑客和它的工作正常.

我已经用小hack修改了代码,将最后一个div添加为draggable元素,即使我们滚动容器,它也总是会捕捉到你的情况下的父(overflowContainer).

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

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

原文地址：https://www.jb51.cc/jquery/177234.html