5

我试图使可拖动的对象从远处相互对齐。它几乎完成了，但不起作用的事情是，如果您仔细观察示例，助手会落后 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);
            },
4

1 回答 1

2

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

作为解决方法，您可以在拖动期间设置间隔函数并每 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!            
});
于 2012-12-24T17:57:04.780 回答