Question

jQuery UI Draggable提供grid选项，设置后，将可拖动元素捕捉到网格。我遇到的唯一问题是我仍然希望它在捕捉之前制作动画。

如果我的网格为[500,500]，那么在鼠标覆盖500px的距离之前，将不会有用户反馈。

是否可以做类似的“对齐网格”的事情，但同时也有动画效果？

Answer 1

我认为你的意思是你想在用户完成拖动后捕捉到网格。在这种情况下，您可以使用draggable的stop事件并计算元素的偏移量。

假设你在父元素中包含一个draggable，从offset（0,0）开始，这是左上角。然后，您可以对元素应用常规的可拖动效果，并在stop上计算其位置并将其捕捉到最近的“单元格”。

这个代码看起来像是：

$(el).draggable({
  stop: function(e, ui) {
    var elem = ui.helper,
        left = elem.position().left,
        top  = elem.position().top;

    elem.css({
      left: left - (left%10),
      top: top - (top%10)
    });
  }
});

此代码将始终基于元素的左上角像素坐标捕捉，并依赖于绝对定位的元素以及非静态定位的父元素（相对，绝对等）

**编辑**

我创建了一个快速演示 - http://jsfiddle.net/LQwMe/1/

jQuery UI可拖动动画，同时捕捉到网格

1 个答案: