Javascript jQuery UI 可拖动，对齐网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6930777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Draggable, Snapping to a Grid
提问by mellowsoon
I have two containers. A thumbnail container, and a "page" container. Both are divs. Thumbnails can be dragged back and forth between the two containers. I have revert on the thumbnails set to 'invalid', so they snap back to one of the two containers if they are dropped outside of either one of them.
我有两个容器。缩略图容器和“页面”容器。两者都是div。缩略图可以在两个容器之间来回拖动。我已经恢复了设置为“无效”的缩略图，因此如果它们被丢弃在其中一个容器之外，它们会弹回到两个容器之一。
The thumbnails must snap to a 20x20 grid inside the "page" container. This is so client the client can put the thumbnails in the "page" container in any place, but still be able to line them up neatly.
缩略图必须与“页面”容器内的 20x20 网格对齐。这样客户端客户端可以将缩略图放在“页面”容器中的任何位置，但仍然能够将它们整齐地排列起来。
The problem is the draggable 'grid' option doesn't seem to work too well for this. It seems the "grid" is determined by the draggables location when you start dragging it, rather than acting as if the page has a real grid that can be snapped to.
问题是可拖动的“网格”选项似乎不太适用于此。当您开始拖动它时，“网格”似乎是由可拖动的位置决定的，而不是像页面具有可以捕捉到的真实网格一样。
Is there a way to fix this so the grid is based off the "page" container, rather than the position of the draggable when you start dragging it?
有没有办法解决这个问题，以便网格基于“页面”容器，而不是开始拖动时可拖动的位置？
回答by Chris Lucian
Check the snapping example on the Jquery UI Site:
检查 Jquery UI 站点上的捕捉示例：
http://jqueryui.com/demos/draggable/#snap-to
http://jqueryui.com/demos/draggable/#snap-to
You can take their same example and specify both a grid and a snap parameter.
您可以采用相同的示例并指定网格和捕捉参数。
Then the snap will be based off of the top left corner of the snap selector.
然后捕捉将基于捕捉选择器的左上角。
$( "#draggable5" ).draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] });
The example on the Jquery site will now let the "80x80" box snap based on the big container.
Jquery 站点上的示例现在将基于大容器让“80x80”框捕捉。
In your situation it might be easiest to create a div with 100% width and height, then set the snap: selector (using css selectors) to that div, then specifying a grid to snap to...
在您的情况下，创建一个 100% 宽度和高度的 div 可能是最简单的，然后将 snap: 选择器（使用 css 选择器）设置为该 div，然后指定要对齐的网格...
Good Luck
祝你好运
回答by Capsule
Maybe you could try to round the starting position to the nearest 20 pixels by using the start event on the draggable.
也许您可以尝试使用可拖动对象上的 start 事件将起始位置四舍五入到最接近的 20 像素。
Something like (untested...):
类似（未经测试...）：
$('#draggable').draggable(
{snap : grid: [20,20]},
{start : function(event, ui) {
var startPosition = $(ui.draggable).position();
$(ui.draggable).css({
'left' : (Math.round(startPosition.left/20)*20)+'px',
'top' : (Math.round(startPosition.top/20)*20)+'px'});
}
}
);
I'm trying myself to achieve that but I'm cloning the dragged element to another container so that's even more tricky ;-) I still have to figure out how to set the position of the helper in the start event...
我正在努力实现这一目标，但我将拖动的元素克隆到另一个容器中，因此更加棘手；-) 我仍然需要弄清楚如何在开始事件中设置助手的位置......
Of course it will only work if the starting position is already absolute (like when dragged).
当然，它只有在起始位置已经是绝对的（比如拖动时）才有效。
As a matter of fact, I've nearly achieved it by applying this method to the stop event and removing the grid property.
事实上，通过将此方法应用于停止事件并删除网格属性，我几乎实现了它。
You don't get any visual feedback when moving the object around because there's no grid per se anymore, but when dropping it, it goes to your own 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'});
}
Here's a working example: http://jsfiddle.net/qNaHE/3/
这是一个工作示例：http: //jsfiddle.net/qNaHE/3/
