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