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