Jump to content

How to differentiate between click and drag?


Recommended Posts

I'm trying to make a system where i have 'letter'-sprites (a square with a letter on it) which can move from one collection to another to allow you to form a word.


To do this i need to be able to differentiate between click and drag, because clicking a letter should add a letter to the end of the word-collection, while dragging would allow you to place the letter on the place you drag it to in the word.


Now i have implemented the drag-behaviour, with events.onDragStop, which works fine. But when I also implement events.onInputDown, it gets fired when i start dragging.


This seems kind of predictable, as the input is actually down. But how do I differentiate between the two? Seems like a common issue, any solutions?

Link to comment
Share on other sites

You can use onInputUp instead of down.

Also, you might need to have a variable that tells you if the sprite was dragged, because I think input up and stop drag would both be fired.


The flow would be like this:


On click,

 - do nothing.

On Drag start,

 - set the was_dragged variable to true.

On input up,

 - check was_dragged, if false do click things.

 - set was_dragged to false.


 - Do drag stop things

Link to comment
Share on other sites

Ok, something is not working. Here is the code I used (out of context of course) (it's typescript):

        addLetter(letter: Letter) {            if (this.Letters.length-1 < this.MaxLetters) {                var self = this;                this.Group.add(letter); console.log(this.Group.length);                letter.Group = this.Group;                this.Letters.push(letter);                this.showLetters();                letter.events.onDragStop.removeAll();                letter.events.onDragStop.add(function (item: UI.Letter) {                    console.log("ondragstop");                    var droppedOnTarget = false;                    for (var i = 0; i < self.Targets.length; i++) {                        var target = self.Targets[i];                        if (target.overlap(item)) {                            console.log("dropped on target");                            target.addLetter(item);                            self.removeLetter(item);                            droppedOnTarget = true;                        }                    }                    if (!droppedOnTarget) {                        self.showLetters();                    }                });                letter.events.onDragStart.removeAll();                letter.events.onDragStart.add(function (item: UI.Letter) {                    console.log("ondragstart");                    item.Group.bringToTop(item);                });                letter.events.onInputDown.removeAll();                letter.events.onInputDown.add(function (item: UI.Letter) {                    console.log("oninputdown");                });                letter.events.onInputUp.removeAll();                letter.events.onInputUp.add(function (item: UI.Letter) {                    console.log("onInputUp");                });                            }        }

When I click a letter i just get the following calls: oninputdown, ondragstart en again ondragstop. How can I get the oninputup event called?

Link to comment
Share on other sites

  • 1 year later...
  • 3 months later...
  • 2 weeks later...

I also could use this functionality. Has anyone found a successful way of doing this?

I figured this out today:


function isDrag() {    var distanceFromLastUp = Phaser.Math.distance(game.input.activePointer.positionDown.x, game.input.activePointer.positionDown.y, game.input.activePointer.x, game.input.activePointer.y);    if (distanceFromLastUp != 0) {        return true;    } else {        return false;    }}
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...