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

Hi,

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

Yeah, I should have mentioned that but I'm not really sure about it because of stuff like http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html. Then I came across http://stackoverflow.com/questions/2856262/detecting-html5-drag-and-drop-support-in-javascript and used http://jsfiddle.net/cDmVF/ in FF and Chrome which worked but in IE it returns false. Considering the API is based on something thats supposedly been in IE since 5.5 I'm a little confused by it all.

Denis Hoctor 2010-07-18 09:02:34

Well apart from that, the only other relevant technology might be client side databases. Unfortunately, the spec for this is "on hold" and implementation is in an indeterminate state. There are two competing models: SQL, and key-value pairs, and I'm not sure which browser will support which model, and when. For these sorts of things, I have been using http://caniuse.com/, which is a great resource for finding out which technologies can be used, when. KVP is currently supported as through sessionStorage and localStorage. They might be useful to you.

Jesse Dhillon 2010-07-18 22:17:13

ansaurus

tags:

views:

answers:

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

related questions