HTML5 Drag & Drop z-index and tiling problems

I have built an interaction where a group of objects are dragged on to one of two areas, where they tile together to fill the areas nicely. This works perfect in Flash, no problems at all. The issue is with how the HTML5 version works.

First off, all the drag items are behind every other element on the screen. Now, this seems rather broken. It would be fixable, by just changing the z-index of the dragitem class using CSS... but before they dragged these elements just don't exist. I can not find them anywhere in the HTML. It's as if they're canvas objects, until they're dragged into place, where they become normal elements.

The only solution I have for this, is to change the droparea z-index using javascript... but this still means that my dragelements are hidden behind all the other text/buttons/framing... not ideal.

My second issue is the tiling functionality. Again, no complaints about the flash version, it works exactly as intended. The HTML5 version however... not even slightly does this work. I'm being a little harsh here, the Y axis works fine, the top property is calculated correctly. The X axis on the other hand does not change, the left property never changes.

Now, obviously this is quite a major issue, as none of my drag & drops work properly on HTML5(iPad/modern browsers).

Has anyone else had this issue, or got a work around... other than my javascript "fix"?

TL;DR - HTML5 Drag & Drop tiling doesn't work, and all the drag elements are hidden behind other content.

FIX(ish)!
For those looking for a "fix" for this problem, I can't directly offer you one. Other than changing the z-index of all your elements using javascript, you're out of look. The easiest way to "fix" the problem is to change the z-index of your droparea elements; this way the interaction you've built pseudo-works.

$('.droparea').css('z-index','1');

Execute that javascript and you're onto a winner...