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

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:

https://bcswartz.github.io/jQuery-clickToClickMove-demo/

(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).

The demo includes a link to the GitHub repo where the code is hosted.

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: