iPad Safari Event Handler

Question

Let's say I have a box/table with multiple rows.. These rows are draggable.

Now I have a JS where I have implemented event handlers for touchstart,touchmove, touchend for the iPad....Basically they just map these events to corresponding mouse events like mouseover, mousedown, mouseup, etc

Now here is my issue;

While I am able to drag any of the rows from the table, I also want to be able to scroll it. When I press any finger on screen and drag down, it does the drag action for that row (since I am using event.preventDefault() for touchmove to prevent the default scrolling region).

Now I understand that I cannot have both the actions (drag/scroll) using a single finger.. So I want to implement/have a scroll action when 2-fingers are used.. (The other case i.e. for single finger, it should do the drag action)

Now I am aware that event.touches.length/event.targetTouches.length gives no of fingers on screen, I am not sure how to use that to do the scrolling action... Just as an FYI, this scrolling would be similar to what we get on the iPad for fixed height div scrolling (overflow:auto), which iPad provides out-of-the-box..

Answer 1

You could fire preventDefault later, and optionally. Figuring out if you want the custom / drag behavior first.

something like this: ( i have no idea if this exact code will work since i cannot test it right now, this assumes you use jQuery, and i don't know the event properties for the number of fingers but just to give you an idea:)

$('#SomeElement').TouchMove(
   function(e)
     {
        if( /* number of fingers equals one */ )
        { 
          e.preventDefault()
          //more element-drag code could go here
          return;
        }
     }
);