1 Reply Latest reply on Dec 30, 2007 4:26 PM by wineleaf

    Best solution for "nested" dragging

      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:

      <DynImage id="map" source="USA.jpg">
      <Town label="NYC">
      <Town label="LA">

      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 gets zoomed.
      Positions - Takes it's childs and makes them draggable and sends an event when a child has been dragged with the old and the new coordinates.

      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 says "false").

      What would be the best way to solve this issue in a component-fashion way?
        • 1. Re: Best solution for &quot;nested&quot; dragging
          wineleaf Level 1
          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:

          image == mouseDownEvent.target.parent