July, 2010


1
Jul 10

Prototype / scriptaculous iPad dragdrop hack

I was really pleased when I got an iPad from the states a few months back.

I was really miffed that my app using prototype / scriptaculous didn’t dragdrop out of the box.

I looked around to see if anyone else had fixed the lib, to no avail, so I finally spent some of my wee small hours time hacking the library to support this.

The subtle differences in the API:

  • its “touchstart”, “touchend”, “touchmove” not “mousedown”, “mouseup”, “mousemove”
  • To work out if touch is supported use (just found out this isn’t supported in android):
    var supports = ('createTouch' in document)
  • There is no concept of a current pointer when your finger isn’t on the screen, so when you drop, you have to use the previous pointer (luckily already tracked in the dragdrop lib)
  • There is an array of touches on the iPad (for different fingers etc), so event.pageX is event.touches[0].pageX

dragdrop.js and prototype.js files attached

prototype.js
dragdrop.js

The bits that don’t work yet: the drag seems to be greedy right now, so I can’t activate links in the draggable.  Need to look at the webkitdragdrop.js lib to see how they handled that.

Thanks Thomas Fuchs, for scriptaculous in the first place, and secondly for the iPad demo which i ripped to bits to work out how it was put together.