jQuery UI Draggable 提供了一个grid
选项,当设置该选项时,会将您的可拖动元素捕捉到网格。我遇到的唯一问题是我仍然希望它在捕捉之前进行动画处理。
如果我的网格是,[500,500]
那么在鼠标覆盖 500px 的距离之前不会有用户反馈。
是否可以做类似的“对齐网格”的事情,但同时也可以动画?
jQuery UI Draggable 提供了一个grid
选项,当设置该选项时,会将您的可拖动元素捕捉到网格。我遇到的唯一问题是我仍然希望它在捕捉之前进行动画处理。
如果我的网格是,[500,500]
那么在鼠标覆盖 500px 的距离之前不会有用户反馈。
是否可以做类似的“对齐网格”的事情,但同时也可以动画?
我想你的意思是你想在用户完成拖动后捕捉到网格。在这种情况下,您可以利用可拖动的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/