javascript - jQuery UI 可拖动，捕捉到网格

Question

我有两个容器。缩略图容器和“页面”容器。两者都是div。缩略图可以在两个容器之间来回拖动。我已恢复设置为“无效”的缩略图，因此如果它们掉落到其中任何一个容器之外，它们就会恢复到两个容器之一。

缩略图必须对齐到“页面”容器内的 20x20 网格。这样客户端客户端可以将缩略图放在“页面”容器中的任何位置，但仍然能够将它们整齐地排列。

问题是可拖动的“网格”选项似乎对此效果不佳。当您开始拖动时，“网格”似乎是由可拖动对象的位置决定的，而不是像页面具有可以捕捉到的真实网格一样。

有没有办法解决这个问题，使网格基于“页面”容器，而不是开始拖动时可拖动对象的位置？

Answer 1

查看 Jquery UI 站点上的捕捉示例:

http://jqueryui.com/demos/draggable/#snap-to

您可以采用他们的相同示例并同时指定网格和捕捉参数。

然后捕捉将基于捕捉选择器的左上角。

$( "#draggable5" ).draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] });

Jquery 站点上的示例现在将让“80x80”框基于大容器捕捉。

在您的情况下，最简单的方法可能是创建一个宽度和高度为 100% 的 div，然后将 snap: 选择器(使用 css 选择器)设置为该 div，然后指定要对齐的网格...

祝你好运