可拖动对象对齐

Question

我试图使可拖动对象从远处彼此对齐。它几乎完成了，但不起作用的是，如果您仔细观察示例，助手会落后 1 次。如果您将其向上移动 1 个像素，助手将转到您所在的 -1 位置。移动到鼠标所在的位置:(

希望你明白这是一个工作代码（演示）

任何想法有什么问题吗？

我认为问题出在这一部分，但我不知道要更改什么才能在没有此错误的情况下工作：

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

Answer 1

听起来像一个错误，最后一次移动后不会调用拖动事件。如果用户快速移动鼠标，问题就非常明显。

作为解决方法，您可以在拖动期间设置一个间隔函数，并每 100 毫秒绘制一次网格线：

更新 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!            
});