lunes, 13 de agosto de 2012

touch draggable for iPad/iPhone

Some time ago I had to implement a good draggable plugin for mobile devices (iPad and iPhone), the current app was using the jquery ui draggable and it was good (very good) in the browser. But sadly it was not that good on mobile, it was choppy and not really nice.

We had layer to simulate the mouse events on the devices that does not support it, and that made the jquery ui plugin to work properly. Well at least as good as it could be on mobile devices.
But somehow (maybe because in my interior I had a designer/UX soul) I feel it was not good enough, the performance was not that great and that was very sad. jquery ui draggable uses top/left properties to move the elements around, and since those properties are not hardware accelerated, it does not look good on the iOS devices.

But css transforms are hardware accelerated so I took the decision (about one year ago) to make this very tiny widget implementing the same interface of the jquery ui one (well only the one I needed at least) and the result is this widget, which seems to perform better than the current version of the draggable one from jquery ui. I'm pretty sure the next version is going to fix this for mobile/tablet devices, but just in case you feel adventurous, like to take risks or just like to play with new code, you can use this one and implement the rest of the interface that is missing here.

Source code:

Demo: (make sure you visit it on an iPad/Android)
In the case of android it seems the experiment at the bottom is not working not sure why yet