Libgdx Touch image interaction

Question

Is there a way for an image to move to a different position when the user clicks on that image.

public Players() {
    deck.displayHand();

    stage = new Stage(new ScreenViewport());

    Image card1 = new Image(sprite);

card1.addListener(new InputListener(){
        @Override
        public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {

            return true;
        }

        @Override
        public void touchUp(InputEvent event, float x, float y, int pointer, int button) {

        }
    });

}

@Override
public void draw(Batch batch, float parentAlpha) {

    stage.act();
    stage.draw();

}

I know I have to add a listener but I'm quite confuse what to do after. The objective is for the user to touch the card image and it would move to a different location.

Answer 1

1. Move to a predefined position when you/user click on that image :

   Add an Action to that image(Actor child), Let's assume predefined position is x_pos,y_pos and movement time is t in sec

   card1.addListener(new ClickListener() {
        @Override
        public void clicked(InputEvent event, float x, float y) {
             card1.addAction(Actions.moveTo(x_pos, y_pos,t));
       }
   });
   

2. Objective is to touch the card/image and it would move to a different location according to the user touch :

   card1.addListener(new DragListener(){
       @Override
       public void drag(InputEvent event, float x, float y, int pointer) {
           card1.moveBy(x - card1.getWidth() / 2, y - card1.getHeight() / 2);
           super.drag(event, x, y, pointer);
       }
   });
   

---

You need to set your stage as InputProcessor

Gdx.input.setInputProcessor(stage);

Answer 2

Image is an Actor so you can add Actions to it.

card1.addListener(new ClickListener() {
    @Override
    public void clicked(InputEvent event, float x, float y) {
        card1.addAction(Actions.moveTo(100, 100, .5f, Interpolation.circleIn));
    }
});