jQuery的可拖动网格
看起来Draggable构造函数中的’grid’选项相对绑定到被拖动元素的原始坐标 – 所以简单地说，如果你有三个可拖动的div，它们的顶部分别相对于100,200,254像素相对给他们的父母：
当’grid’设置为[1,100]时，所有这些都被启用拖动：
draggables = $('.draggable'); $.each(draggables, function(index, elem) { $(elem).draggable({ containment: $('#parent-div'), opacity: 0.7, revert: 'invalid', revertDuration: 300, grid: [1, 100], refreshPositions: true }); });
这里的问题是，一旦你拖动div3 ，比如说，向下，它的顶部会增加100，将它移动到354px而不是仅仅增加46px （254 + 46 = 300），这将使它到达下一站在网格中 – 300px ，如果我们将parent-div视为参考点和“网格持有者”。
我查看了可拖动的源代码，它似乎是一个内置的缺陷 – 它们只是相对于可拖动元素的原始位置进行所有计算。
我想避免猴子修补可拖动库的代码，我真正想要的是如何使Draggable计算相对于包含父级的网格位置。 但是，如果猴子修补是不可避免的，我想我将不得不忍受它。
我通过简单地添加我自己的脚本来解决这个问题：在draggable下设置它来划分math.Floor（x / 100）* 100和Y相同。
如果你不介意在源代码中查看http://labs.pezcuckow.com/solveit/game.html和make draggable函数！ （游戏在附近完成）
你也会发现恢复问题，它不会让它们回到网格状态。 所以我写了自己的“检查是否无效”function到底：可拖动（再次在上面的游戏中可见）。
因为@ Pez的答案丢失了（404），所以我就是这样做的：
$('#elem').draggable({ ...., drag: function(e, ui) { ui.position.left = Math.floor(ui.position.left / 10) * 10; ui.position.top = Math.floor(ui.position.top / 10) * 10; } });
演示： http ： //jsfiddle.net/ThiefMaster/yGsSE/
我在过去几天开始使用JQuery draggable，并找到了一个简单的解决方案。
将position属性设置为absolute，并将具有top和left设置的小部件添加到与网格对齐的值。
由于top / left的值是绝对值，因此在关闭并将其存储在db中时也更有意义。
Jquery桌面：
1 2 3