Question

我有一些HTML结构：

<body>
    <div id="board">
        <div id="block" />
    </div>
</body>

#board可以放在任何地方。

例如，假设它是position: relative; left: 3px; top: 7px;（注意顶部和左边不是10的乘法），body有margin: 0, padding 0。

我想让#block与10px x 10px网格对齐。但是网格应该从父级的左上角开始（#board），不在页面的左上角！

所以它应该将我的#block与(3,7), (13, 17), (23, 27), ...对齐而不是(0,0), (10, 10), (20, 20)...。

如何实现？

当我使用时：

jQuery(value).draggable({
    containment: "#board",
    grid: [10,10],
    snap: "#board"
});

它会从页面的左上角与10px x 10px网格对齐，而不是#board（并且只会另外捕捉到#board的边缘，这不是解决方案）。

Answer 1

好像你有正确的想法。如果您将#block相对于#board定位并通过将“snap”设置为true来遵循Shningamae的建议，您将获得所需的结果。您可以使用jQuery的偏移方法验证结果：

$('#block').draggable({
    containment: "#board",
    grid: [10,10],
    snap: true,
    stop: function() {
        var offset = $(this).offset();
        console.log("Top: " + offset.top + " Left: " + offset.left);
    }
});

以下是一个示例：http://jsfiddle.net/63G8H/

Answer 2

Snap是一个布尔值

如果设置为选择器或为true（相当于'.ui-draggable'），   当拖动时，拖动将捕捉到所选元素的边缘   靠近元素的边缘。

默认值：false

我认为您的快照选项应为“true”。

我们还有另一个选项：

snapMode

确定可拖动元素的捕捉元素的哪些边缘   抓住。如果snap为false，则忽略。可能的值：'inner'，'outer'，   '两个'

默认：'both'

来源：JQuery SDK Draggable

将可拖动元素与从父位置开始的网格对齐

2 个答案: