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/