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/