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...

8 Replies
Pete Rix

Hi Gary and Leslie!

This is a different bug than the thread mentioned in the last post. I was having the same issue as Gary with a course I'm currently working on. After testing multiple HTML5 outputs of the course in mobile Safari, I think I've found the culprit.

There's an issue with the z-index of draggable items when the shuffle answers functionality is enabled. All draggable items display below all other on-screen content. When shuffle is set to "None," the z-index of draggable items is above all other objects on screen and the interaction works as intended.

Gary, let me know if you were using similar settings and if this change works for you. I hope it helps.

Leslie, if this narrows down the issue for Gary as well, could you pass this along to your QA team? That'd be greatly appreciated. Thanks!