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

Question

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

如果我的网格是[500,500]，那么在鼠标移动到500px的距离之前不会有用户反馈。

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

Answer 1

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

假设您有一个包含在父元素中的可拖动元素，从偏移量 (0, 0) 开始，即左上角。然后，您可以对元素应用常规的可拖动效果，并在停止时计算其位置并将其捕捉到最近的“单元格”。

其代码如下所示:

$(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/