Javascript jQuery UI可拖动，捕捉到网格

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

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

问题是可拖动的“网格”选项似乎对此不太适用。“网格”似乎是由开始拖动时的拖动表位置决定的，而不是像页面有一个可以捕捉到的真实网格一样

---

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

检查Jquery UI站点上的捕捉示例：

可以以它们为例，同时指定栅格和捕捉参数

---

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

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

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

在您的情况下，创建一个具有100%宽度和高度的div可能是最简单的，然后将snap:selector（使用css选择器）设置为该div，然后指定要捕捉到的网格

---

祝你好运

也许你可以尝试通过使用拖动表上的开始事件将开始位置四舍五入到最接近的20像素

类似于（未经测试的…）：

我正试图实现这一点，但我正在将被拖动的元素克隆到另一个容器中，因此这更加棘手；-） 我仍然需要弄清楚如何在开始事件中设置助手的位置

当然，只有当起始位置已经是绝对位置时（如拖动时），它才会起作用

事实上，通过将此方法应用于stop事件并删除grid属性，我几乎实现了这一点

移动对象时不会得到任何视觉反馈，因为不再有网格本身，但在放下它时，它会转到您自己的网格：

stop: function(event, ui)   {
    var stopPosition = $(ui.draggable).position();
    $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'});
}

下面是一个工作示例：

---

我仍有兴趣了解您是否找到了解决方案。我尝试了下面的答案，但它并没有解决我的问题。我的问题是，每个元素似乎都有自己的网格，这取决于它的放置位置。@crush，我已经成功地在第一次拖动的停止事件上使用了一个自定义舍入函数。一旦将对象位置四舍五入到最接近的X像素，您就可以应用一个新的网格参数，该参数将基于起始位置，即已知网格的倍数。@这基本上就是我最后要做的。使用jQuery的本机捕捉到网格，这几乎是不可能的，但这里有一个很好的解决方案：“捕捉将基于捕捉选择器的左上角。”-错误，这不起作用。希望如此。

stop: function(event, ui)   {
    var stopPosition = $(ui.draggable).position();
    $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'});
}