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.

Organis · Answer 1 · 2019-12-22T19:06:39.620

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);
}

Organis - Thanks!! This works perfectly. Will this be effected by (or have an effect on) other draggable objects on the stage? — dzinermachine, Dec 22 '19 at 15:22
@dzinermachine The code above tracks exactly one object accessible by instance name **square1**. Do you have a list of similar objects you want to drag and track? — Organis, Dec 22 '19 at 16:35
no, I only needed to track the X/Y coordinates of 1 object - square1. However, I have two objects on the stage that can be dragged and dropped: square1 and square2. When dragging square1, it shows the coordinates dynamically and hides square2. Everything works fine when dragging square1. But when I drag square2 it still gets hidden as if I'm dragging square1. — dzinermachine, Dec 22 '19 at 17:47
I know this is a separate question so maybe I should start another question thread lol... — dzinermachine, Dec 22 '19 at 17:51
@dzinermachine The most straightforward way is to define a separate set of **onStart** and **onStop** handlers for **square2**. But the most straightforward way is often the worst one in terms of scalability and the size of the script. I'll update my post in a minute. — Organis, Dec 22 '19 at 18:56

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

1 Answers1