# Dragging container (cards) - issue with .on("dragend")

**URL:** <https://phaser.discourse.group/t/dragging-container-cards-issue-with-on-dragend/8109>\
**Category:** Phaser 3\
**Created:** [November 12, 2020, 9:45pm UTC](https://phaser.discourse.group/t/dragging-container-cards-issue-with-on-dragend/8109 "2020-11-12T21:45:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shoulao](https://avatars.discourse-cdn.com/v4/letter/s/258eb7/32.png) [@Shoulao](https://phaser.discourse.group/u/Shoulao)\
**Post date:** [November 12, 2020, 9:45pm UTC](https://phaser.discourse.group/t/dragging-container-cards-issue-with-on-dragend/8109/1 "2020-11-12T21:45:01Z")

</div>

Hi, I have a problem with dragging the container. I want to create a game where I can move/drag cards. When I use the “pointerdown” event the card goes to the mouse position, but I can not make it move and watch the position of the mouse. It just jumps to coordinates.

this method creates cards from word, each card contain one character and this works rly well

```javascript
generateCardsWithWords(word) {
        this.ui.correctAnswer = [...word];
        this.ui.shuffeled = shuffleArray(this.ui.correctAnswer);

        this.ui.shuffeled.forEach((letter, index) => {
          const cardWrapper = [
            this.add
              .image(20, 10, "card")
              .setScale(0.65)
              .setInteractive({ cursor: "pointer" }),
            this.add
              .text(25, 25, letter, { ...defaultFont, fontSize: "120px" })
              .setOrigin(0.5),
          ];

          const cardContainer = this.add.container(
            this.cameras.main.width / 2 + index * 190,
            700,
            [...cardWrapper]
          );
          this.physics.world.enable(cardContainer);
          const singleCard = cardContainer.getBounds().width;
          const xContainerOffset = singleCard * this.ui.correctAnswer.length - 100;
          cardContainer.x -= xContainerOffset / 2;
          this.ui.cardGroup.add(cardContainer);
    }

    create() {
      this.ui = {
          data: getData()
          gameStage: 1,
          correctAnswer: null,
          shuffedAnswer: null,
          cardGroup: this.physics.add.group(),
          target: [],
          label: [],
        };

    this.generateCardsForWord(this.ui.data[0].word);

        this.ui.cardGroup.children.entries.forEach((card) => {
          card.first
            .setInteractive({ draggable: true })
             .on("pointerdown", function (pointer, dragX, dragY) {
            **THIS WORKS, BUT CARD JUMPS TO COORDINATES**

               card.x = pointer.x;
            card.y = pointer.y;
              console.log(pointer.x);
             })
             .on("drag", function (pointer, dragX, dragY) {
               **THIS DOESNT WORK**
               console.log(dragX);
               card.x = pointer.x;
               card.y = pointer.y;
             })
            .on("dragend", function (pointer, dragX, dragY, dropped) {
               **THIS DOESNT WORK**
              card.x = pointer.x;
              card.y = pointer.y;
            });
        });
    }
```