iPad Touch for the web

So you have a jquery component that you want to drag and drop on the web. Works great right. All you had to do was

<img id="img_myimage" src="../SharedImages/myimage.png" alt="" />

    $("#img_myimage").draggable({
        zIndex: 999,
        revert: true,      // will cause the event to go back to its
        revertDuration: 0  //  original position after the drag
    });

Well, what happens though if you have someone using an iPad and not your AppStore app. Maybe you want that draggable object to work on the iPad as well. Here’s something that worked for me.

1. Determine if someone is using an iPad on your webpage, example pseudo code:

if HttpContext.Current.Request.UserAgent.ToLower.Contains("ipad") {
}

2. Include this in your file. I’d recommend you check this out (touch punch jquery) http://touchpunch.furf.com/

<script src="../Scripts/jquery.ui.touch-punch.min.js" type="text/javascript"></script>

That’s it.

You’ll find your draggable is now iPad friendly.

Advertisements
Previous Post
Next Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: