4 Replies Latest reply on Sep 10, 2009 1:48 PM by flCoder74

    Mouse Position at dragDrop event

    flCoder74

      I'm dragging and dropping items between canvas containers. When I drop an item, the dragDrop event fires. However, I can't seem to find the mouseX and mouseY values of the drop target container, at the point when the item is dropped. Once the mouseDown event fires to start the drag, it seems as though Flex stops capturing the mouseX and mouseY values.

       

      I put a mouseMove event listener on the container where I'm dropping, and as soon as the mouseDown event starts, the mouseMove event stops.

       

      I looked at mouseUp, and while that gives me the correct current mouse position, it is triggered after the dragDrop event, making it too late to use the x and y position of the item I dropped.

       

      How do I find where the point where I dropped the item?

        • 1. Re: Mouse Position at dragDrop event
          Gregory Lafrance Level 6

          I think you need a mouseMove event on the drag initiator for this. See this sample program:

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_5.html

           

          If this post answered your question or helped, please mark it as such.

          • 2. Re: Mouse Position at dragDrop event
            babo_ya Level 3

            code or sample code?

             

            BaBo,

            • 3. Re: Mouse Position at dragDrop event
              flCoder74 Level 1

              As soon as the mouseDown event is triggered, the mouseMove event no longer triggers. Thank you for the link. I've read that many times while working on this. What it doesn't address is the position of the item dropped. The only way I can think of to get around this is to listen for the mouseUp instead of the drapDrog event, but that should not be necessary. Use the code below, as an example. No matter where you drop the panel in the second canvas, it puts it at the y value of the mouse at the moment the doDrag (or mouseDown) event triggered.

               

               

              <?xml version="1.0"?>
              <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

               

                  <mx:Script>
                      <![CDATA[
                          import mx.managers.DragManager;
                          import mx.core.DragSource;
                          import mx.events.DragEvent;
                          import flash.events.MouseEvent;
                          import mx.controls.Alert;

               

                          private function mouseOverHandler(event:MouseEvent):void {
                              var dragInitiator:Panel=Panel(event.currentTarget);
                              var ds:DragSource = new DragSource();
                              ds.addData(dragInitiator, "format");
                              var PanelProxy:Panel = new Panel();
                              PanelProxy.height=myPanel.height;
                              PanelProxy.width=myPanel.width;               
                              DragManager.doDrag(dragInitiator, ds, event, PanelProxy, 0, 0, 1.00);
                          }
                         
                          private function dragEnterHandler(event:DragEvent):void {
                            if (event.dragSource.hasFormat("format"))
                              DragManager.acceptDragDrop(Canvas(event.currentTarget));
                          }
                         
                          private function dragOverHandler(event:DragEvent):void
                          {
                              if (event.dragSource.hasFormat("format")) {
                                  if (event.ctrlKey) {                   
                                      DragManager.showFeedback(DragManager.COPY);
                                      return;
                                  }
                                  else {
                                      DragManager.showFeedback(DragManager.MOVE);
                                      return;
                                  }
                              }

               

                              DragManager.showFeedback(DragManager.NONE);
                          }
                         
                          private function dragDropHandler(event:DragEvent):void {
                            if (event.dragSource.hasFormat("format")) {
                                var draggedPanel:Panel = event.dragSource.dataForFormat('format') as Panel;
                                var dropCanvas:Canvas = event.currentTarget as Canvas;
                                var newPanel:Panel = new Panel();
                                newPanel.x = 0;
                                newPanel.y = drpTgt.mouseY;
                                newPanel.height = draggedPanel.height;
                                newPanel.width = draggedPanel.height;
                                dropCanvas.addChild(newPanel);
                                Alert.show("Item Dropped at "+newPanel.y);
                            }
                          }
                         
                          private function dragCompleteHandler(event:DragEvent):void {
                              var draggedPanel:Panel =
                                  event.dragInitiator as Panel;
                              var dragInitCanvas:Canvas =
                                  event.dragInitiator.parent as Canvas;

               

                              if (event.action == DragManager.MOVE)
                                  dragInitCanvas.removeChild(draggedPanel);
                          }           
                      ]]>
                  </mx:Script>

               

                  <mx:Canvas
                      width="250" height="500" 
                      borderStyle="solid"
                      backgroundColor="#DDDDDD">
                     
                      <mx:Panel id="myPanel" x="10" y="192" width="150" height="150" layout="absolute" title="Test Panel" mouseMove="mouseOverHandler(event);" dragComplete="dragCompleteHandler(event);"/>
                  </mx:Canvas>

               

                  <mx:Canvas id="drpTgt"
                      width="250" height="500" 
                      borderStyle="solid"
                      backgroundColor="#DDDDDD"
                      dragEnter="dragEnterHandler(event);"
                      dragOver="dragOverHandler(event);"
                      dragDrop="dragDropHandler(event);" horizontalScrollPolicy="on">       
                  </mx:Canvas>
              </mx:WindowedApplication>

              • 4. Re: Mouse Position at dragDrop event
                flCoder74 Level 1

                I think that if I set the y positions like this:

                 

                newPanel.y = event.stageY + dropCanvas.verticalScrollPosition;

                 

                it will get the correct position