What 'html5' frontend tech to use for a drag and drop team management app?

Background:

I'm trying to build a web app (as a personal project using modern browsers only) that will leverage the http://www.blackoutrugby.com API. This is an online rugby mgt simulation game. The intention is to offer something powerful to the user which will calculate best teams based on current stats from their team and opponent, while giving me a chance to get familiar with new tech. The API开发者_如何转开发 returns XML but I have been translating this to JSON as I think it's a better format to work with.

I want to have a drag and drop interface on the UI so they can customise the team which would be layout out on a background like http://www.rygbirhuthun.com/images/site_images/pitch_players.gif, which would show more than the player number (age, nationality, best position, profile pic etc.). This would be a player card object like baseball cards kids collect. These cards would be draggable through out the application as player objects. I'm aware of Canvas, SVG and CSS3 transitions/animations.

What combination of these techs or others I've missed would work well for a project like this?

On an aside I've built a prototype in .Net to get the API response and translate it to JSON from XML @ http://github.com/denishoctor/BlackoutRugby.API.POC. And I'm writing a python Google App Engine tool for data storage. If anyone is interested in getting involved please get in touch.

Thanks, Denis

Did you forget HTML5 drag and drop?