jQuery的可拖动网格

看起来 Draggable的构造函数中的’grid’选项相对于被拖动元素的原始坐标 – 如果你有三个可拖动的div,其顶部分别相对于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>

当’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函数！ (游戏附近完成)

你也会发现恢复问题,它不会让它们回到网格状态.所以我写了自己的“检查无效”功能到底：可拖动(再次在上面的游戏中可见).