JQuery ...调整网格偏移中间拖动

Question

我在 JQuery 中有一个可拖动元素，如果你将它拖到某个区域，它有一个网格，如果你将它拖到另一个区域，它没有网格（或者网格设置为 [1 ,1]，同样的事情）。这是我的代码：

$('#draggableThing').draggable({
        drag:function(){
            if (isOverRegionWthGrid()) 
            {
                $(this).draggable('option','grid',[1,20])
            }
            else
            {
                $(this).draggable('option','grid',[1,1])
            }}})

到目前为止效果很好。唯一的问题是，当我从无网格区域拖动到有网格的区域时，网格的“偏移量”不一致。我需要它与每次拖动时不会上下改变几个像素的网格对齐。似乎 JQuery 是通过可拖动元素的初始位置来定义网格的。有没有什么意见可以给网格一个绝对位置，或任何解决方法？

谢谢！

Answer 1

使用 CSS，定位网格元素并将其设置为具有绝对定位？

Answer 2

我建议在切换回 1、20 时移动可拖动的对象，使其捕捉到您想要使用模除法的网格中的坐标。例如：(currentX - gridOriginX) % cellWidth, (currentY - gridOriginY) % cellHeight。

在下面的示例中，我只是使用可拖动元素的原始位置来确定网格应该在哪里。我也使用可放置的“over”事件而不是“drag”事件来做到这一点。

HTML：

<div id="thing">
<div id="draggable5" class="draggable ui-widget-content">
  <p>Drag Me</p>
</div>
</div>
<div id="thing2">
</div>

CSS：

#draggable5 {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
}
#thing {
    height: 150px;
    border: 1px solid #900;
}
#thing2 {
    height: 150px;
    border: 1px solid #00F;
}

Javascript：

$(document).ready(function () {

    var obj = $("#draggable5");
    obj.draggable( {
        grid: [ 1, 20 ], 
    } ).data("init", obj.offset());

    $("#thing").droppable({
        over: function(e, ui) {
            obj = ui.draggable;
            var init = obj.data("init");
            var here = obj.offset();
            here.top = init.top + Math.floor((here.top - init.top) / 20) * 20;
            here.left = init.left + Math.floor((here.left - init.left) / 1) * 1;
            obj.offset(here);
            obj.draggable( "option", "grid", [ 1, 20 ] );
        }
    });
    $("#thing2").droppable({
        over: function(e, ui) {
            obj = ui.draggable;
            obj.draggable( "option", "grid", [ 1, 1 ] );
        }
    });
});

小提琴：http://jsfiddle.net/qaqDz/3/