5 Replies Latest reply on Jun 21, 2007 6:32 AM by SumitroChatterjee

    Drag/Drop a label placing it in its new x,y co-ordinates

    bahlsonal
      I'm working on a project where I need to drag a label around and when dropped, it should be placed wherever my mouse is. So far, I can drag it onto a canvas, but it dissapears - when i drag the label onto the canvas, its location should be wherever my mouse is currently at, ie. i want to drag a label then drop it to a new location.

      I already know the code for all the drag functions & classes (dragInitiator)- but I'm wondering about the code to implement dropping the label to a new location based on my mouse's x,y co-ordinates. Please help. Thank you.
        • 1. Re: Drag/Drop a label placing it in its new x,y co-ordinates
          ntsiii Level 3
          You can simply set the x and y properties of the dragged component to the mouse x and y locations.

          It is a bit more complicated if you want the thing to stay exactly where it is dropped an not move its top, left cornter to the mouse pointer location. You need to stroe the x,y offsets from the dragged component's top,left corner, and use those to calculate the correct x,y.

          If you are dragging between components, then you will have to translate coordinates between global and local coordinates.

          Tracy
          • 2. Re: Drag/Drop a label placing it in its new x,y co-ordinates
            bahlsonal Level 1
            Does the following code look right?

            <script>
            private function dragIt(event:mouseEvent)
            {
            var dragInitiator:Label = new Label();
            label1.x = dragInitiator.mouseX;
            label1.y = dragInitiator.mouseY;
            }

            // some other functions related to dragDrop()
            </script>

            <mx:label id="label1" mouseMove="dragIt(event)"/>

            Can someone help with getting the code right? I just want to be able to drag the component(label) and drop it in a new location making its x,y co-ordinates the same as the mouse's. its not working quite right. Thanks.
            • 3. Re: Drag/Drop a label placing it in its new x,y co-ordinates
              ntsiii Level 3
              No, you need to assign the x,y in the dragDrop handler function.

              Are you dragging between components or within a container?

              Tracy
              • 4. Re: Drag/Drop a label placing it in its new x,y co-ordinates
                bahlsonal Level 1
                I'm trying to drag the labels within a canvas container. Still couldn't get it to work.
                • 5. Re: Drag/Drop a label placing it in its new x,y co-ordinates
                  SumitroChatterjee
                  i think u need to do some computation here ... while in the dragit() event u should have an account of the mouseX and mouseY positions (the positions on the label not the container) with you. Then finally when u are dropping it ... u have to take into account that u subtract a relative value of this mouse X & Y (relative to the container) from the actual container.mouseX and container.mouseY.

                  here is an example that is working on my system :-

                  private function dragIt(event:MouseEvent, text:String, // [this is the mouse move event]
                  format:String):void {

                  tempX = this.mouseX;
                  tempY = this.mouseY;

                  var dragInitiator:Label = new Label();
                  }

                  private function dragDropIt(event:DragEvent):void{ // [this is the drag complete event]
                  this.x=this.parent.mouseX - tempX;
                  this.y=this.parent.mouseY - tempY;
                  }

                  I hope u find the solution with this!
                  Sumitro