Handling iPad touch events for draggables/droppables (undefined changedTouches)
javascript, jquery, jquery-ui, touch-event
Solution
I figured it out after discovering Does jQuery preserve touch events properties?.
It turns out that the jQuery event doesn't copy over the `changeTouches` property, so you have to either use jQuery's `originalEvent` property or skip jQuery all together and bind with a function like `addEventListener`
Problem
I am trying to get jQuery drag/drop to work nicely with iPad touch events. I found this code on the internet: ``` function touchHandler(event) { var touches = event.changedTouches, first = touches[0], type = ""; switch (event.type) { case "touchstart": type = "mousedown"; break; case "touchmove": type = "mousemove"; 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 simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null); first.target.dispatchEvent(simulatedEvent); event.preventDefault(); } ``` It appears to work fine if I attach the touchHandler to the `document` touchstart/move/end, but then no native zooming/scrolling on the iPad is allowed, so I am trying to just attach this handler to the draggables themselves. The issue that I am seeing with this is that `event.changeTouches` is always undefined for some reason, as you can witness in http://jsfiddle.net/myLj2/1/ . I can't come up with a reason why a touch event will always have an undefined `changeTouches` property and because of it, this code won't work. Any thoughts?