可拖動的對象對齊

Question

我試圖讓可拖動的對象從遠處彼此對齊。 其最重要的是，但不工作的東西是，如果你仔細觀察這個例子，助手是1移動的後面..如果你移動它1像素的助手將會去-1的地方你是唯一的下一步是在您的鼠標是:(

希望你明白HERE IS A WORKING CODE (DEMO)

任何想法有什麼錯呢？

我認爲這個問題是在這部分，但我不知道是什麼改變這種意志沒有這個bug的工作：

drag: function(event, ui) { drawGuideLines($(this)); }, 
     start: function(event, ui) { removeAlignLines($(this)); }, 
     stop: function(event, ui) { 
       rebuildAlignLines($(this)); 
       linesTimeout = setTimeout("hideGuideLines()", 100); 
      },    

Answer 1

聽起來像一個錯誤，拖動事件不會在最後一步之後調用。如果用戶快速移動鼠標，問題就非常明顯。

至於解決方法，你可以設置一個間隔功能durring拖動時間，並繪製網格線每100ms：

更新jsbin：http://jsbin.com/oqohuq/4/edit

var handleInterval = null; 
$(".draggable").draggable({ 
    opacity : 0.35, 
    handler : "._header", 
    stack : ".draggable", 
    grid: [1, 1], 
    refreshPositions: true, 
    snap: ".drag_alignLines", // Setting snap to alignment lines 
    snapTolerance: 10, 
    snapMode: "inner", 
    drag: function(event, ui) { drawGuideLines($(this)); }, 
    start: function(event, ui) { 
     //Init the interval here 
     var self = $(this); 
     handleInterval = setInterval(function(){ drawGuideLines(self);},100); 
     removeAlignLines($(this)); }, 
    stop: function(event, ui) { 
     //Clear interval here 
     clearInterval(handleInterval); 
     rebuildAlignLines($(this)); 
     linesTimeout = setTimeout("hideGuideLines()", 100); 
    }//Don't forget to remove the last coma!    
});