NOTE: As of July 12, 2009, this blog has been discontinued and replaced by the new Thought Delimited blog. All of the entries in this blog can be found there, along with new posts.
Problem: No Drag-and-Drop On The iPhone/iPod Touch. Solution: Click-To-Click Move
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:
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:
Jonny