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。

在下面的示例中，我只使用了draggable元素的原始位置来确定网格应该的位置。我也使用可放置的“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/

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

2 个答案: