jQuery的可拖动网格

Question

它看起来像在的构造函数的"网格"选项可拖动的相对绑定到元素的原始坐标被拖动-所以简单地说,如果你有三个可拖动的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计算相对于包含父级的网格位置.但是,如果猴子修补是不可避免的,我想我将不得不忍受它.

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/

Answer 2

我通过简单地添加我自己的脚本来解决这个问题：在draggable下并将其设置为

divide math.Floor(x/100)*100 

Y 也一样。