Manually start dragging

Phaser 3
1

How can I manually start the dragging system on a Sprite programmically? Say for example I hold down a button, then a circle appears at the pointer as if I invoked

circle.on('drag', function(pointer, dragX, dragY) {
  this.x = dragX;
  this.y = dragY;
});

Without actually starting a pointer down on the element itself. Is this possible??

2

Use this.input.setDraggable(circle, true OR false) to programmically allow or disallow dragging.

For example:

let circle = this.add.circle(200, 200, 50, 0xff00ff).setInteractive()

circle.on('drag', (pointer, dragX, dragY) => {
  circle.x = dragX
  circle.y = dragY
})

// will allow to drag the circle
this.input.setDraggable(circle, true)

// will disallow to drag the circle after 5 seconds
this.time.addEvent({
  delay: 5000,
  callback: () => this.input.setDraggable(circle, false)
})

This example should also help.

3

As far as I can’t tell, this does not manually start dragging but just sets an object as draggable. Like @Legomite, I would like to start dragging programmatically; this woud be useful in doing something like:

  • Click on an item (press/release mouse button) => drag starts;
  • Move the mouse => dragging continues;
  • Click on something (e.g. a zone) => drag ends.

This mechanic is needed for example if you want to implement a drag & drop inventory, when you drag an item on another and switch the one being dragged.

I searched everywhere but I really couldn’t come up with anything (apart from coding this part from scratch, but it would be best to leverage exisiting drag system).

Thank you for your help!

4

Hey @navarre79,
I’m guessing what you need is following;

  • Give your so called draggable object a pointerdown event
gameObject.on('pointerdown', function() {
    this.scene.selected = this; 
    // maybe first check if there isn't any selected yet or smt?
})
  • Register a mousemove event globally
this.input.on('mousemove', function(pointer) {
  //check here is a scene has a selected gameObject
  if(this.selected) { //to be able to detect if user really select something.
      this.selected.setPosition(pointer.x, pointer.y);
  }
}, this);
  • Second give the zone down event to get the selected gameObject
dropZone.setInteractive();

dropZone.on('pointerdown', function() {
     var selected = this.scene.selected;
     this.scene.selected = null;
     // after this probably u need to position 
     // the selected gameObject to your zone
     selected.setPosition(this.x, this.y);
});

I hope this cover’s what u need =)

1 Like
5

Hi, thank you!
Unfortunately I dropped my project some time ago due to other priorities :face_with_raised_eyebrow:
Just out of curiosity, but in your code I don’t see where the dragging is started in code instead of mouse action, did I miss something?

6

There is actually not a dragging state, instead we have a following mouse situation going on,

So when you click the gameObject, it’s just marking itself as selected on the scene and since scene
has a mousemove event listening gameObject gonna follow the mouse instead of dragging.
I’m actually not sure this is the ideal way but it surely works on my small-ish projects =)

7

Oh, ok, it figures! Thanks again!