JQueryUI可拖动加上-webkit-overflow-scrolling隐藏拖动元素吗？

Question

I have a scrolling div that scrolls beautifully on iPad2 using -webkit-overflow-scrolling:touch; .

Inside, I have draggable elements using JQueryUI.draggable and TouchPunch to enable dragging via touch on mobile.

I'm so close to having it work perfectly, but I've found an issue. With divs set up like this, my JQueryUI draggable helper object won't float over-top everything else. With -webkit-overflow-scrolling off, it floats properly, but scrolls choppy.

Is there a way to have the best of both worlds?

Here's a JSBin, please view using an iPad or iPhone to see the problem!

Here's an EDITing view of the JSBin

Thanks in advance!

Answer 1

I figured it out, I just needed to make the draggable append the helper to body

$(element).draggable({appendTo: 'body'});

This JS Bin still works for posterity. Try this on iPad

Here's the code editing version