Problem: No Drag-and-Drop On The iPhone/iPod Touch. Solution: Click-To-Click Move

jQuery , RIAs , Web development Add comments

As I mentioned in an earlier blog post, the drag-and-drop functions provided by various JavaScript libraries (jQuery, YUI, etc.) won't work in the iPhone/iPod Touch Safari web browser because the dragging gesture is used for scrolling around the web page.

That's a big problem for those of us who use drag-and-drop in our web applications to allow our users to reorder the items in a list, but I've come up with an alternative method for rearranging items using the jQuery JavaScript library that works on the iPhone/iPod browser as well as regular browsers. I call it the "Click-to-Click Move" method (CTCM).

The method involves the user making two clicks (or taps if they're using an iPhone/iPod). The first click is when the user clicks/taps on an HTML element (like an icon or hyperlink) within the item they want to move. That click fires off a jQuery-powered JavaScript function that creates target elements above each item in the list and a target below the last item in the list.

The second click/tap is when the user selects one of those targets as the new location for the item. That click/tap fires another jQuery-powered function that:

  • makes a copy of the item associated with the first click
  • deletes the original item
  • places the copied item beneath the target associated with the second click
  • deletes all the targets

The end result: the item has been repositioned within the DOM structure of the page. You can capture the new item order and save it via a form submit or an AJAX call.

I've put together a "to-do list" application to demonstrate the method. It's designed/optimized for viewing on an iPhone/iPod Touch Safari browser, but you can view it in a regular browser:

http://www.swartzfager.org/ctcm

(Note: Non-iPhone/iPod users can also view it using the iPhone tester site http://www.iphonetester.com, which simulates the iPhone/iPod view minus the touch screen capability).

I've also created a simpler demo with no server-side code (just HTML, CSS, and JavaScript) that you can download if you want to view/play with the jQuery functions behind the technique: ctcmSample.zip

Finally, here are some screenshots from the "to-do list" demo: The original list of items:

An item has been clicked, revealing the move, edit, and delete icons for the item:

The move icon has been clicked, and the target elements have been created:

The user clicked on the first target. The item is moved, the targets are deleted, and the list order has been changed:

3 responses to “Problem: No Drag-and-Drop On The iPhone/iPod Touch. Solution: Click-To-Click Move”

  1. Henrik N Says:
    Thanks for this. I looked at various jQuery nested sortable implementations (jTree, nestedSortables, UI/Sortables) and none of them was quite a good fit for what I wanted. This post inspired me to consider a much simpler and better solution.
  2. Jonny Shaw Says:
    Very Good, but i wonder if you could add some persistance to it?
    Jonny
  3. Brian Swartzfager Says:
    @Jonny: Not sure what you mean by that. The data for the working demo is stored in a database, so the changes users make as they mess with it are persisted. As for the download file, I kept it simple (no server-side code) so folks using other back-end technologies could give it a try.

Leave a Reply