What is the best approach to enable nested dragging?
Here is an example what I mean with "nested":
I have an application that displays an image of a country,
since the image is bigger than the area that displays it the image
is draggable so that the user can choose waht part of the image
he/she wants to see.
hOn top of the image are the country's towns, these shall
also be draggable since the user should be able to change the
location of the city if the current one is wrong. The application
looks "kind" of like this:
My application consists of 2 generic compenents made by me:
DynImage - Takes an image and makes it zoomable, draggable
and places additional layers ("decorators") on top of it that also
Positions - Takes it's childs and makes them draggable and
sends an event when a child has been dragged with the old and the
Both components listens for "mouse-downs".
When the user tries to move the map everything works fine:
The user clicks the map, the map.startDrag() function is called and
the map is dragged.
The problem arises when the user wants to drag the town: When
the user clicks the a town, the town.startDrag() method is called
AND, directly afterwards, since the user also clicked the
underlying map, the map.startDrag() method is called. This makes
the map get drawn but not the town.
This is exactly how the API says it should be:
startDrag - "Lets the user drag the specified sprite. The
sprite remains draggable until explicitly stopped through a call to
the Sprite.stopDrag() method, or until another sprite is made
draggable. Only one sprite is draggable at a time."
What I would like to achieve is that only the town gets
dragged when a town is clicked. The good thing is that the Position
component is the one that first gets the event. This means that I
could put some kind of if-statement in DynImage that only calls
map.startDrag() if no other dragging is being made, but is it
possible to check this? (I have tried DragManager.isDragging which
What would be the best way to solve this issue in a
Hehe, as one often do, I found a solution just after I posted
this. But if somebody has a better suggestion please respond.
One solution, perhaps not prefered, would be to let the
Positions component call mouseDownEvent.stopImmediatePropagation();
which would make the DynImage never get the event. This is, of
course, not so good since it might "break" functionality for other
components that was waiting for that event.
The other solution, probably the obvious for normally
talented people :-) would be for the DynImage to check the
mouseDownEvent.target property. If the user clicked a town, the
town is set in this property. But if the user clicked directly on
the image then this property is that images loader-object. In other
words to check if the map should be dragged I can just check if the
following is true: