我有两个容器。缩略图容器和“页面”容器。两者都是div。可以在两个容器之间来回拖动缩略图。我已将缩略图还原为“无效”，因此，如果将其拖放到两个容器中的任何一个之外，它们将恢复为两个容器之一。
缩略图必须捕捉到“页面”容器内的20x20网格。这样客户端可以将缩略图放在任何位置的“页面”容器中，但仍可以整齐地排列它们。
问题在于，可拖动的“网格”选项似乎不适用于此目的。似乎“网格”是由您开始拖动时的可拖动位置决定的，而不是好像页面具有可以捕捉到的真实网格一样。
有没有一种方法可以解决此问题，以使网格基于“页面”容器，而不是在开始拖动时基于可拖动对象的位置？
最佳答案
检查Jquery UI网站上的捕捉示例:
http://jqueryui.com/demos/draggable/#snap-to
您可以以它们相同的示例为例，并同时指定grid和snap参数。
然后，捕捉将基于捕捉选择器的左上 Angular 。
$( "#draggable5" ).draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] });
现在，Jquery站点上的示例将使“80x80”框基于大容器进行捕捉。
在您的情况下，最简单的方法是创建一个宽度和高度为100％的div，然后将snap:选择器(使用css选择器)设置为该div，然后指定要捕捉到的网格...
祝你好运
关于javascript - jQuery UI可拖动，捕捉到网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6930777/