Restrict image movement to grid - iphone

Question

I'm trying to make the boxes move only in horizontal and vertical lines following the touchesMoved event.
I could easily check on every touch event if the center of the box is in the center of the current grid block and then allow a direction change. But that will require the touches to be very precise, and could also lead to bugs because of speedy fingers etc. and then miss the touch event.
What I essential would like to do is make the box move correctly in the grid, even though your touch path is not "perfect". See image below, blue lines indicates box movement, green line is the path of the touch. The box needs to follow the grid closest to the touch path, so it looks like your moving it.
How can i accomplish this?
Edit: Forgot to mention that the movement of the box should be smooth, not jump from grid to grid.
Video
Bonus info: I will also need to flicks boxes left/right up/down with touch momentum, and of course have some sort of collision detection, so boxes can't move through other boxes on the grid. Am I better off with a 2d physics engine?

Answer 1

Smooth animation based on hacker2007 answer:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *aTouch = [touches anyObject];
CGPoint location = [aTouch locationInView:gridContainerView];
for (UIView *subView in gridContainerView.subviews) {
if (conditionForBeingAGridBlock && CGRectContainsPoint(subview.frame, touchPoint))
{
[UIView beginAnimations:#"Dragging A DraggableView" context:nil];
self.frame = CGRectMake(0, location.y, subview.frame.size.width, subview.frame.size.height);
[UIView commitAnimations];
}
}
}
This will move the view you are dragging under your finger, you can add checks yourself to make sure that it doesn't go where it can't. But this will get your a smooth dragging animation.
Seems the problem is what you're setting the frame to in your anitamion:
Currently every time you move the square a little bit you get a new rect here:
CGRect rect = [self.grid getCellRect:self.grid.gridView x:cell.x y:cell.y];
Then in your animation you do this:
self.frame = rect;
Then you animate the box to that rect. So if you move your finger really quickly then you will get that 'skip' effect. If you change it to this:
self.frame = CGRectMake(location.x - self.bounds.size.width / 2, location.y - self.bounds.size.height / 2, self.bounds.size.width, self.bounds.size.height);

Answer 2

try this approach assuming your grid blocks are located in gridContainerView
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
for (UITouch *touch in touches) {
CGPoint touchPoint = [touch locationInView: gridContainerView];
for (UIView *subView in gridContainerView.subviews) {
if (conditionForBeingAGridBlock &&
CGRectContainsPoint(subview.frame, touchPoint)) {
box.frame = subview.frame;
}
}
}
}