Best HTML5 technologies for creating drag and drop sports team builder interface?

Project Overview:

I’m working on a personal web application for a rugby management simulation game. The app needs to work with modern browsers and will connect to an external API that provides team data in XML format (which I convert to JSON for easier handling).

Main Requirements:

I need to create a drag and drop interface where users can build their teams visually. The interface should display player cards (similar to trading cards) on a field layout background. Each card would show player details like age, position, stats, and photo. Users should be able to drag these player cards around the entire application.

The app should also calculate optimal team combinations based on current player statistics and opponent data.

Technical Considerations:

I’m familiar with Canvas, SVG, and CSS3 transitions/animations as potential solutions. I’m also open to other HTML5 technologies I might have overlooked.

Which combination of these technologies would be most suitable for building this type of interactive sports management interface?

I’m particularly interested in performance and user experience aspects since the interface will involve frequent drag and drop operations with multiple player objects.