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

Question

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

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

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

Answer 1

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

假设您在父元素中包含一个可拖动对象，从偏移量 (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/