drag and drop and then save image

Question

I'm building a soccer website with admin and user-view interface. I have an entity with players and image with soccer ground. Now I want (admin) to drag and drop players from some list (div or something else) to soccer ground. With click on Save button (or something else) I want that players will be fixed on ground so the user can't change them - view only. Admin can then edit positions etc.

What is the best solution to do that? Can I do that with jQuery, html or I have to use flash?

Any suggestions, best practices ...

Answer 1

I would use the jQueryUI .sortable() extensions. Just link your player divs to allow sorting to the destination divs. on drag complete event, modify some hidden form variables to show which player is in what position, then save to post to server. then with your permissions system, just show results to users who are not Admin.