# Is there an easy way to add collision when dragging items?

**URL:** <https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350>\
**Category:** Phaser 3\
**Created:** [December 15, 2018, 11:36pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350 "2018-12-15T23:36:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![cincospenguinos](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cincospenguinos/32/197_2.png) [@cincospenguinos](https://phaser.discourse.group/u/cincospenguinos)\
**Post date:** [December 15, 2018, 11:36pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/1 "2018-12-15T23:36:52Z")

</div>

In my game I have a set of objects that the user can drag around with the pointer, and another set that they can’t. I want to be able to have the two sets collide with one another so that the user can’t drag one onto the other. Here’s my create code:

```javascript
let dynamicGroup = this.physics.add.group();
let staticGroup = this.physics.add.staticGroup();

...populate groups...

this.physics.add.collider(staticGroup, dynamicGroup);

```

Regardless, the collision detection doesn’t work. I’ve tried just putting them all in the same group, manually setting collisions with each other, and yet I can’t seem to get it to work.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [December 16, 2018, 12:01am UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/2 "2018-12-16T00:01:36Z")

</div>

Turn on physics debug.

---

<div class="post-metadata">

**Author:** ![cincospenguinos](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cincospenguinos/32/197_2.png) [@cincospenguinos](https://phaser.discourse.group/u/cincospenguinos)\
**Post date:** [December 16, 2018, 12:02am UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/3 "2018-12-16T00:02:41Z")

</div>

I did. The objects can move into each other without any output in the console.

---

<div class="post-metadata">

**Author:** ![PBMCube](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/pbmcube/32/93_2.png) [@PBMCube](https://phaser.discourse.group/u/PBMCube)\
**Post date:** [December 16, 2018, 1:42pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/4 "2018-12-16T13:42:29Z")

</div>

> [@samme](#):
>
> Turn on physics debug.

your assumption is everyone already knows how to do that. I don’t please explain how to turn on the physics debug or point me to some documentation and I’ll teach myself. Thanks.

---

<div class="post-metadata">

**Author:** ![cincospenguinos](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cincospenguinos/32/197_2.png) [@cincospenguinos](https://phaser.discourse.group/u/cincospenguinos)\
**Post date:** [December 16, 2018, 2:05pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/5 "2018-12-16T14:05:52Z")

</div>

You turn on the physics debug by modifying the game config:

```javascript
// main.js
let config = {
    type: ...
    ...
    physics: {
         default: 'arcade',
         arcade: {
              debug: true // This is where debug is turned on for arcade physics
         }
    }
}

let game = new Phaser.Game(config)

```

---

<div class="post-metadata">

**Author:** ![cincospenguinos](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cincospenguinos/32/197_2.png) [@cincospenguinos](https://phaser.discourse.group/u/cincospenguinos)\
**Post date:** [January 7, 2019, 4:27am UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/6 "2019-01-07T04:27:48Z")

</div>

So I’ve realized that I haven’t included the code for dragging. Here it is:

```javascript
this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
	gameObject.x = dragX;
	gameObject.y = dragY;
});

```

When I setup a collider that fires a function when a collision occurs, I get that function to fire, which tells me that (most likely) the draggable game objects go where the pointer takes them, regardless of a detection of collision.

---

<div class="post-metadata">

**Author:** ![tijuinem](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tijuinem/32/564_2.png) [@tijuinem](https://phaser.discourse.group/u/tijuinem)\
**Post date:** [January 23, 2019, 12:17pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/7 "2019-01-23T12:17:18Z")

</div>

hy man,  
have you solved this ? I have the same question …

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 23, 2019, 6:09pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/8 "2019-01-23T18:09:50Z")

</div>

I don’t think there is an easy way to do this. I got it partly working by checking collisions (twice) during the drag update and setting the body deltas manually.

---

<div class="post-metadata">

**Author:** ![Mikko\_Torniainen](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mikko_torniainen/32/682_2.png) [@Mikko\_Torniainen](https://phaser.discourse.group/u/Mikko_Torniainen)\
**Post date:** [February 28, 2019, 4:39pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/9 "2019-02-28T16:39:19Z")

</div>

The problem here is that arcade physics cannot collide if velocity to that direction is zero. So anything not moving with physics. The solution might not using colliders but use [Phaser](https://photonstorm.github.io/phaser3-docs/Phaser.html)[.Geom](https://photonstorm.github.io/phaser3-docs/Phaser.Geom.html). Intersects and sprite.getBounds() in update function similar to this phaser 2 example [https://phaser.io/examples/v2/sprites/overlap-without-physics](https://phaser.io/examples/v2/sprites/overlap-without-physics) .

---

<div class="post-metadata">

**Author:** ![201flaviosilva](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/201flaviosilva/32/5386_2.png) [@201flaviosilva](https://phaser.discourse.group/u/201flaviosilva)\
**Post date:** [February 23, 2022, 6:34pm UTC](https://phaser.discourse.group/t/is-there-an-easy-way-to-add-collision-when-dragging-items/350/10 "2022-02-23T18:34:15Z")

</div>

Hey there,  
Has anyone made it work, after 3 years? 🙂