Search code examples
drag-and-drophtml5-canvaspolymer-1.0createjseaseljs

How to prevent polymer scrolling page on touch screen during touch drag and drop procedures on a canvas?


I am currently using easel.js (create.js) on my polymer 1.0+ site to handle rendering of shapes on the html canvas, and I'm handling mouse events using "pressmove", "mousedown" and "pressup" on those shapes within the canvas. Everything is working well with the mouse. However, drag and dropping of those shapes on mobile devices doesn't work. A tap and drag with the finger on a touch enable device instead scrolls the page itself (which does need to be scrollable). Is there a way to prevent polymer scrolling of the page when the user taps on the canvas or one of the shapes within the canvas itself?


Solution

  • Fortunately, I found the answer here: Using touch events with Createjs / Easeljs

    A single line of code was required:

    createjs.Touch.enable(stage);