How do you display a sprite location in real time during drag and drop (AS3)

Question

I'm trying to figure out how I can show an object's X/Y coordinates while it's being dragged across the stage.

If I have a square located at 0,0 and I drag it to a new location--for example 50,50--I want to show the square's location as it is being dragged, not just when it's dropped. So the coordinate numbers will be constantly changing as the object is dragged.

Right now my code only detects the object's X/Y location when dragging starts and when dragging stops:

import flash.events.MouseEvent;

this.addEventListener(MouseEvent.MOUSE_DOWN, startDragging, true);
this.addEventListener(MouseEvent.MOUSE_UP, stopDragging, true);

function startDragging(e:MouseEvent) {

square1.startDrag();
xDisplay_txt.text = square1.x;
yDisplay_txt.text = square1.y;

}

function stopDragging(e:MouseEvent) {

testStage1.stopDrag();
xDisplay_txt.text = testStage1.x;
yDisplay_txt.text = testStage1.y;

}

Any help is appreciated. Thanks.

Answer 1

You need to call a certain handler, while you are dragging that thing, on a regular basis in order to update the output texts. The simplest way is to use the ENTER_FRAME event that fires, as its name states, every frame.

import flash.display.Sprite;

import flash.events.Event;
import flash.events.MouseEvent;

// We may drag different objects, we need to know which one.
var currentDrag:Sprite;

// A list of objects we can drag.
var aList:Array = [square1, square2];

// Iterate over all the items in the list
// and subscribe to each one separately.
for each (anItem:Sprite in aList)
{
    anItem.addEventListener(MouseEvent.MOUSE_DOWN, onStart);
}

function onStart(e:MouseEvent):void
{
    // Store, which one object is being dragged.
    // Read on difference between Event.target and Event.currentTarget.
    currentDrag = e.currentTarget as Sprite;
    currentDrag.startDrag();

    // Subscribe to ENTER_FRAME event to control the way of things.
    // We need to do it only if we drag square1, as requested.
    if (currentDrag == square1)
    {
        addEventListener(Event.ENTER_FRAME, onFrame);
    }

    // Subscribe to stage, because this way you will handle the
    // MOUSE_UP event even if you release the mouse somewhere outside.
    stage.addEventListener(MouseEvent.MOUSE_UP, onStop);
}

function onFrame(e:Event):void
{
    // This event fires every frame, basically, every 40 ms.
    // Round the coordinates and update the texts.
    xDisplay_txt.text = int(currentDrag.x).toString();
    yDisplay_txt.text = int(currentDrag.y).toString();
}

function onStop(e:MouseEvent):void
{
    // That is also why we are keeping the refference
    // to the object we are dragging: to know which one to drop.
    currentDrag.stopDrag();

    // We're not dragging anything anymore.
    currentDrag = null;

    // Unsubscribe, as it is no longer needed.
    // That's fine even if we didn't subscribed to in in the first place.
    removeEventListener(Event.ENTER_FRAME, onFrame);

    // Unsubscribe from this one too.
    stage.removeEventListener(MouseEvent.MOUSE_UP, onStop);
}