Drag and Drop Touch End Event

Help & Support
1

Hello,

I have 3D entity that I can drag around the screen, and I want to see if the user drops it over a 2D element.

The code for the mouse works, when I start dragging I add a listener to the target element:

 this.app.root.findByName("Group - Left Box").element.on('mouseup',this.DroppedLeft,this);

However, when I try to use touch, it doesn’t work:

 if(this.app.touch){
        this.app.root.findByName("Group - Left Box").element.on('touchend',this.DroppedLeft,this);
    }

Am I not understanding the events for touches correctly? I have tried both touchend and touchcancel and neither seem to fire when a touch is ended over my target element.

Any help would be appreciated!

Thanks,
Justin

2

At a guess, as the cursor is still over the element that is being dragged, the element you are dragging to never receives any input because it s covered by the element that is being dragged.

I suspect that you would need to do a box to box check to see if you placed the draggable item into the correct place.

3

I wondered if that could be the case. I was trying to find a way to check if that last position of the touch was with in the bounds of the element.

I assume that is what you mean by a box to box check? However, I am having a difficult time finding the best way to do that check.

Currently, I am storing the last touch position coordinates each frame from pc.EVENT_TOUCHMOVE.

Drag.prototype.onTouchMove = function(event){
    var screenPosition = pc.getTouchTargetCoords(event.changedTouches[0]); 
    this.lastPos = screenPosition;
};

Then I am trying to figure out how to do a hit test with those coordinates for the target element, but not having much luck.

I tried down this path:

if(this.lastPos.x > target.element.screenCorners[0].x && this.lastPos.x < target.element.screenCorners[1].x){
    if(this.lastPos.y > target.element.screenCorners[0].y && this.lastPos.y < target.element.screenCorners[2].y){
        return true;
}
return false;

However that doesn’t seem to be working. Is there a best practice for element hit testing a touch position?

Thanks,
Justin

4

Honestly, it’s not a system I’ve had to implement in PlayCanvas yet. Box to box check would be standard rect vs rect check.

If I had to do this, I would look at the input manager for the element system to get a better idea on how to calculate the coordinates: https://github.com/playcanvas/engine/blob/master/src/input/element-input.js