jQuery UI 可拖动，对齐网格答案

【问题标题】：jQuery UI Draggable, Snapping to a GridjQuery UI 可拖动，对齐网格
【发布时间】：2011-08-03 17:43:23
【问题描述】：

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

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

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

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

【问题讨论】：

我仍然很想知道您是否找到了解决方案。我已经尝试了下面的 1 个答案，但它并没有解决我的问题。我的问题是每个元素似乎都有自己的网格，基于它被丢弃的位置。
@crush，我已经成功地实现了在第一次拖动的停止事件上使用自定义舍入函数。一旦您的对象位置四舍五入到最近的 X 像素，您就可以应用一个新的网格参数，该参数将基于已知网格的倍数的起始位置。
@Capsule 这基本上就是我最终所做的。
使用 jQuery 的原生 snap-to-grid 这几乎是不可能的，但这里有一个很棒的自己动手解决方案：stackoverflow.com/a/20712561/165673

标签： javascript jquery jquery-ui

【解决方案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，然后指定要捕捉到的网格...

祝你好运

【讨论】：

"快照将基于快照选择器的左上角。" - 错了，这不起作用。希望它做到了。 jsfiddle.net/FNhFX/6

【解决方案2】：

也许您可以尝试使用可拖动对象上的开始事件将起始位置四舍五入到最接近的 20 像素。

类似（未经测试...）：

$('#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'});
        }
    }
);

我正在努力实现这一目标，但我正在将拖动的元素克隆到另一个容器中，这样就更加棘手了 ;-) 我还得弄清楚如何在开始事件中设置助手的位置...

当然，它只有在起始位置已经是绝对位置时才有效（比如拖动时）。

事实上，通过将此方法应用于停止事件并删除网格属性，我几乎已经实现了。

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

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'});
}

这是一个工作示例： http://jsfiddle.net/qNaHE/3/

【讨论】：