Recommended Posts

I'm currently making a UI system for my project, but it is the first time I work with more "advanced' UI concepts.

Currently, my system uses two different entities:

- draggable components (objects I can drag around which will return to their original position on release unless they are over an interactiveComponent).

- interactive components (essentially data holders which will detect that a draggable component has been released over them.

The interactive components work flawlessly (and I am proud/surprised!)

The draggable components on the other hand work almost perfectly except:

my onMouseMove() references the mouse coordinates in such a way that the movement works until the draggable component passes over an object that was drawn after on the stage. What this means is that I have say, a grid of 3X3 objects (draggable components) and I try to drag any of the leftmost ones to the right: I can't because they need to move over other objects.

I believe the problem with my implementation is that the onMouseMove will cease to trigger if there is an object between itself and the mouse (anything "above it"). I'm struggling finding a way to make the draggableObject (currently being dragged) always the topmost item to circumvent this issue.

I'm using DartLang API / StageXL framework which is roughly similar to AS3 except it outputs as HTML5.