Friday, July 11th, 2008

iPhone Web Goodies: Drag and Drop with Touch, Resize and Rotate with Gestures

Category: iPhone, JavaScript, Showcase

<>p>

The video above shows a simple showcase application that Neil Roberts of SitePen created and wrote about.

He testing out the new APIs such as the touch API where he worked with drag and drop:

javascript
< view plain text >
  1. node.ontouchmove = function(e){
  2.   if(e.touches.length == 1){ // Only deal with one finger
  3.     var touch = e.touches[0]; // Get the information for finger #1
  4.     var node = touch.target; // Find the node the drag started from
  5.     node.style.position = "absolute";
  6.     node.style.left = touch.pageX + "px";
  7.     node.style.top = touch.pageY + "px";
  8.   }
  9. }

And resizing and rotation with the Gestures API:

javascript
< view plain text >
  1. var width = 100, height = 200, rotation = ;
  2.  
  3. node.ongesturechange = function(e){
  4.   var node = e.target;
  5.   // scale and rotation are relative values,
  6.   // so we wait to change our variables until the gesture ends
  7.   node.style.width = (width * e.scale) + "px";
  8.   node.style.height = (height * e.scale) + "px";
  9.   node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
  10. }
  11.  
  12. node.ongestureend = function(e){
  13.   // Update the values for the next time a gesture happens
  14.   width *= e.scale;
  15.   height *= e.scale;
  16.   rotation = (rotation + e.rotation) % 360;
  17. }

Some readers might have noticed that a gesture is just a prettier way of looking at touch events. It’s completely true, and if you don’t handle things properly, you can end up with some odd behavior. Remember to keep track of what’s currently happening in a page, as you’ll probably want to let one of these two operations “win” when they come in conflict.

Related Content:

Posted by Dion Almaer at 10:16 am
5 Comments

+++--
3.4 rating from 38 votes

5 Comments »

Comments feed TrackBack URI

what video? All I see is a black box… Is this video somehow being hosted on the Apple iPhone activation server?

Comment by JonathanLeech — July 11, 2008

@JonathanLeech
Works fine in IE7 & FF3 here. Try refreshing, updating flash or some such.

Comment by KitSunde — July 11, 2008

Has the NDA on this stuff been lifted? Or he breaking the NDA…

Comment by tlrobinson — July 11, 2008

It have not been declared in the article (both this and the linked one) that these features are coming with the new, 2.0 version of the iPhone/iPod Touch software. At least I’m guessing so, as it’s not working on my 1.1.4 iPod Touch.

Comment by AndrasBarthazi — July 12, 2008

Thanks for cheering me up with this nice demo. I was gutted yesterday when I got 2.0 on my ipod touch, only to discover that the fullscreen & svg support that was talked about in March on some websites, has not made it to the iphone 2.0 release from what I can tell. Thank god I didnt spend a lot of time on this stuff before the release.

Another frustration is that webkit and iphone safari are now quite out of sync in terms of features – from what I can tell webkit doesnt have the 3D transforms yet, wheras the iphone doesnt have svg.

Comment by SteveElbows — July 12, 2008

Leave a comment

You must be logged in to post a comment.