import "https://cdn.skypack.dev/@next2d/player@latest";

​

const root = next2d.createRootMovieClip(240, 240, 60, {

    "tagId": "container"

});

​

const { Sprite } = next2d.display;

const { MouseEvent } = next2d.events;

const {

    TextField,

    TextFormat,

    TextFormatAlign

} = next2d.text;

​

const baseTextFormat = new TextFormat();

baseTextFormat.bold  = true;

baseTextFormat.align = TextFormatAlign.CENTER;

​

const baseTextField = root.addChild(new TextField());

baseTextField.defaultTextFormat = baseTextFormat;

baseTextField.text  = "(x:0,y:0)";

baseTextField.x      = -29;

baseTextField.y      = 0;

​

const sprite = root.addChild(new Sprite());

sprite.x     = 90;

sprite.y     = 90;

​

sprite

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(5, "#1B365C")

    .drawRect(0, 0, 100, 60);

​

sprite.buttonMode = true;

sprite.addEventListener(MouseEvent.MOUSE_DOWN, (event) => 

{

    event.currentTarget.startDrag();

});

sprite.addEventListener(MouseEvent.MOUSE_UP, (event) => 

{

    event.currentTarget.stopDrag();

});

sprite.addEventListener(MouseEvent.MOUSE_MOVE, (event) => 

{

    const target   = event.currentTarget;

    target.xy.text = `x:${target.x|0}, y:${target.y|0}`;

});

​

const textFormat = new TextFormat();

textFormat.bold  = true;

textFormat.color = "#fff";

textFormat.align = TextFormatAlign.CENTER;

​

const textField = sprite.addChild(new TextField());

textField.defaultTextFormat = textFormat;

​

textField.width  = 100;

textField.height = 20;

textField.x      = -1;

textField.y      = 15;

textField.text   = "click move";

​

const xyTextField = sprite.addChild(new TextField());

xyTextField.defaultTextFormat = textFormat;

xyTextField.name  = "xy";

xyTextField.text  = `x:${sprite.x}, y:${sprite.y}`;

xyTextField.x      = -3;

xyTextField.y      = 30;