jQuery Touch Punch and css3 translate?


I have a problem with jQuery UI Touch Punch. I can drag everything just fine, but when I use css3's "translsateY", it works on the computer, but doesnt on iPad. The element just jumps up on dragstart and then I can drag it around. Did someone else have this problem?

I have tried to use set translateY on my element on dragstart, but it didn't change anything. When I leave translate away, the element is in the wrong position, but at least drag works.

Problem courtesy of: Frederik Witte


I now wrote my own "translate" function. I took half the height of the object in jQuery via .outerHeight() and added this to the top:50%. This way you don't need to use translateY and it won't conflict with .draggable.

Solution courtesy of: Frederik Witte


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.