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

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/