I have run into an odd issue with iOS Safari on the iPad recently. In the current application I am working on, we have a list of items that can be dragged and dropped on the page. This works great with the mouse. However, I run into issues when I start throwing the touchstart, touchmove, and touchend events in.

The Problem

When a user starts to move their finger around on the iPad, normally this will cause the iPad to “pan” the window around (assuming there is area to scroll). Let’s say the page is long, though, so the window can scroll down.

Apple does not trigger any javascript events for this pan (see the document here). The window just scrolls around. However, if the user happens to touch on an item that is capturing events, one of two things can happen:

1. The touchmove event returns false (or calls preventDefault), in which case the window will not scroll up or down ever when a user swipes on one of those items.

2. The touchemove returns true, in which case the window may scroll up or down with, but if you are “dragging” the item, that will scroll as well.

I have created a jsFiddle here to show you what I mean. List 1 prevents the default behavior, whereas List 2 returns true and allows dragging and scrolling.

Neither of these is preferable.

The Solution

The issue is that I think iOS needs to provide a way of canceling the default pan behavior that a user initiates. I have opened up a bug report with Apple, so I will keep this article posted to in case of any update. Let’s hope they do.

I’m not sure why there really isn’t any way to control (from the browser) at least a way to cancel this event.

From a psuedo-code perspective, what I would like to do, is allow the user to scroll (pan) around the screen as long as the touch-and-hold event is less than say 500ms. In that case, I will return true (but I won’t move the dragged item). After 500ms, though, if the user is still moving around, I would cancel the scroll (pan) event, and then move the dragged item around.

Anyway, for now, we are making a small grab region on the item. However, I think it would be nice to fix this in the future.