Drop/release fails on mobile platforms

I added a test case. Run that on mobile safari on a touch device and behavior is replicated. Dragging works, dropping does not without release and additional touch. I can help with any testing needed.

The TouchList object is empty on touchend, I was able to fix the above issue by using the last TouchList object when e.touches[0] is undefined.

Adding something like this:

      if (first != undefined) {
      	lastTouch = first;
      } else {
      	first = lastTouch;
      }

Should fix the above issue, for now :)

a couple other things..

You can get away with e.preventDefault() only being on the touchmove event, i had to do this so some other links would remain clickable.

some css you can add for webkit:

* {
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}

Replying to [comment:2 davep]:

The TouchList object is empty on touchend, I was able to fix the above issue by using the last TouchList object when e.touches[0] is undefined. Adding something like this:

>       if (first != undefined) {
>       	lastTouch = first;
>       } else {
>       	first = lastTouch;
>       }
> 

Should fix the above issue, for now :)

Where might I add that? I dl'd the full UI and cannot find any pertinent strings. I've no objection to maintaining a local copy briefly, but would much prefer to see this fixed in the real codebase and available on google cdn. Also, I have all that css in already for webkit/mobile safari. Any help appreciated. Thanks!

My slightly updated event handler

 var lastTouch;

 function handleTouchEvent(e) {
  
  var touches = e.changedTouches,
   first = e.touches[0],
   type = '';
  
  // e.touches[0] is empty on touchend, use the last TouchList object instead
  if (first != undefined) {
   lastTouch = first;
  } else {
   first = lastTouch;
  }
   
  switch (e.type) {
   case 'touchstart':  type='mousedown'; break;
   case 'touchmove':   type='mousemove'; e.preventDefault(); break;
   case 'touchend':    type='mouseup';   break;
   default: return;
  }

  //initMouseEvent(type, canBubble, cancelable, view, clickCount,
  //           screenX, screenY, clientX, clientY, ctrlKey,
  //           altKey, shiftKey, metaKey, button, relatedTarget);
  var se = document.createEvent('MouseEvent');
  se.initMouseEvent(type, true, true, window, 1,
           first.screenX, first.screenY,
           first.clientX, first.clientY,
           false, false, false, false,
           0/*left*/, null);
  first.target.dispatchEvent(se);
  
  return;
 }

Note that i only prevent default behavior on touchmove, which works better for my needs.

Replying to [comment:5 davep]:

My slightly updated event handler Note that i only prevent default behavior on touchmove, which works better for my needs.

Awesome! That did it for me. Thank you very much! I also backed off the preventDefault to just touchmove and it works fine. Thanks again!

Duplicate of #4143.