"Add Item", "Remove Item" UI - best way to implement this using jQuery (with mobile device support)
Hi:
Since a picture is worth a thousand words, please see http://www32.myfantasyleague.com/kevin/waivers.html
This UI (two HTML selects, with "Add Item" and "Remove Item" buttons in the middle to move items from one list to the other list) is used throughout our site, and although it's not super elegant, it works well for our desktop customers.
However, we'd like to see if we can make it a bit more modern, and more mobile-friendly. To that end, we're hoping that some jquery expert out there might know if there is some core component, or plug-in, that might be able to support this UI, in addition to the following requirements:
1 ) drag-and-drop interface to move items between the two lists.
2 ) more elegant interface for mobile devices. Currently, "select size=10" HTML elements don't look good at all on iOS devices - they only display one option, and navigating down through a list of 800 or so items is a royal pain.
3 ) minimal HTML coding changes. I'd _love_ to be able to just add a couple of lines of JavaScript and a id or a class or two, and be done with this.
So, is there any sort of existing plug-in that would meet my needs here? Any other suggestions for how to implement this, with the above requirements?
Thanks for any insights into this problem!
Kevin