Canvas drag and drop with touch

[vvk10839047]

I created drag and drop but touchstart don't work.

var cl = this.cl;
createjs.Touch.enable(stage);
cl.addEventListener("touchstart", onTouch.bind(cl));
function onTouch(e) {
  thisCl.addChild(activeCl);
  canvas.addEventListener('touchmove', moveTouch);
  canvas.addEventListener("touchend", mUp);
}
function mUp() {
  canvas.removeEventListener('mousemove', move);
  canvas.addEventListener('touchmove', moveTouch);
}
function move() {
  cl.x = stage.mouseX;
  cl.y = stage.mouseY;
}

[Colin Holgate]

I'm not sure if this issue is still the case:

touchstart callback doesn't work · Issue #465 · CreateJS/EaselJS · GitHub

Does it work any better if you use mousedown or pressed? Could be worth reading this article:

EaselJS Tutorial: Mouse Interaction 

[vvk10839047]

Mouse Events don't work on mobile

[Colin Holgate]

I think most web sites work on mobile, even if they're only using mouse events.

[vvk10839047]

This is mouse events example test .

In mouse events PC work but in mobile don't work

[ClayUUID]

This is a long shot, but try adding this:

createjs.Touch.enable(stage);

[Colin Holgate]

If you want drag to work on mobile you need to stop the browser from taking control of your drag. Including this in the meta tag area of the HTML will stop unwanted highlighting and pinch to zoom:

<meta name="viewport" content="user-scalable=no">

<style type="text/css"> 

* { 

    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

  -webkit-tap-highlight-color: rgba(0,0,0,0);

} 

</style> 

Adding this to the <script> part of your HTML will stop the window from scrolling:

document.ontouchmove = function(e){ e.preventDefault(); }

[vvk10839047]

I was set all that but don't work test