html – 可拖动对象对齐

我试图使可拖动的物体从远处彼此对齐.

它已经完成但是不起作用的是如果你仔细观察这个例子,那么助手就会向后移动……如果你把它移动1个像素,那么帮助者将会转到-1,你是…而且只有下一个移动是你的鼠标所在:(

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

任何想法有什么问题吗?

我认为问题出在这一部分,但我不知道如果没有这个错误会改变什么:

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

最佳答案 听起来像一个bug,在最后一次移动后没有调用拖动事件.如果用户快速移动鼠标,则问题非常明显.

作为解决方法,您可以在拖动时间内设置间隔函数并每隔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!            
});
点赞