javascript - jQuery 的可拖动网格

Question

看起来像 Draggable 的构造函数中的 'grid' 选项相对绑定(bind)到被拖动元素的原始坐标 - 所以简单地说，如果您有三个可拖动的 div，其 top 相对于其父级分别设置为 100、200、254 像素:

<div class="parent-div" style="position: relative;">
    <div id="div1" class="draggable" style="top: 100px; position: absolute;"></div>
    <div id="div2" class="draggable" style="top: 200px; position: absolute;"></div>
    <div id="div3" class="draggable" style="top: 254px; position: absolute;"></div>
</div>

所有这些都可以在“网格”设置为 [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)，如果我们正在查看 parent-div<，这将使其到达网格中的下一站 - 300px/strong> 作为引用点和“网格持有者”。

我查看了可拖动源，这似乎是一个内置缺陷 - 它们只是相对于可拖动元素的原始位置进行所有计算。

我想避免对可拖动库的代码进行猴子修补，我在这里真正寻找的是如何使可拖动库计算相对于包含父级的网格位置的方法。然而，如果猴子补丁是不可避免的，我想我将不得不忍受它。

Answer 1

由于@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/