Disable mobile browser swipe to go back behavior?

Question

I'm building a feature that let's users drag different items around. However, when they drag an item that's near the edge of the screen of their phone, the browser goes back to the last page. Does anyone know if it's able to disable this in a single <div> or is it impossible?

Answer 1

You could try the below code to prevent this.

If the touch element is the targeted div then prevent the action otherwise allow.

HTML:

<div id="tragetDiv"> </div>

 window.addEventListener("touchmove", function(event) {
       let target = event.target;
       if (target.id === "tragetDiv") {
           event.preventDefault();
       }
 });

Answer 2

you can set the draggable item's position inside the div coordinates. If it goes beyond target div simply set the bounds value to that.