How to differentiate between click and drag?

[cheshirepuss42]

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?

[XekeDeath]

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.

OnDragStop

 - Do drag stop things

[cheshirepuss42]

That sounds great.  Is onDragStart only triggered when the target moves position?

[cheshirepuss42]

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?

[Mikko]

Is there a working solution for this? I need to implement simultaneous normal drag and drag without holding the input down. 

 

The above can't work because was_dragged will always be true on inputUp.

[justinboyd5]

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

[ForgeableSum]

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;    }}

[Gob0]

Hi, 

 

i think it will be better if you add a "percent error" in you test. For example, if user move for 3 points up and 4 points left, it's hard to consider this move as a "drag & drop".