Drag & Drop not working properly on Retina iPad (createjs)

Question

I want to create a simple drag & drop exercise, but on the Retina iPad "drag & drop" is not working properly. Here is the code:

var that = this;
createjs.Touch.enable(stage);
stage.enableMouseOver(10);

function initPage() {
  var shape = new createjs.Shape();
  shape.graphics.beginFill("#999999").drawRoundRect(100,100,140,60,8).endFill();
  shape.on("mousedown", function(evt) {
    this.alpha = 0.8;
    this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
  });

  shape.on("pressmove", function(evt) {
    this.x = evt.stageX + this.offset.x;
    this.y = evt.stageY + this.offset.y;
  });

  shape.on("pressup", function(evt) {
    this.alpha = 1;
  });

  that.addChild(shape);
}

initPage();

I can drag the shape, but the more I move it, the more it moves away from my finger. Here is a video I just recorded: https://dl.dropboxusercontent.com/u/11697167/animatecc-bug.mp4

I'm working with Adobe Animate CC, and the exported HTML file contains the following code to make it look good on high-res screens like the Retina iPad:

//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {      
    var lastW, lastH, lastS=1;      
    window.addEventListener('resize', resizeCanvas);        
    resizeCanvas();     
    function resizeCanvas() {           
        var w = lib.properties.width, h = lib.properties.height;            
        var iw = window.innerWidth, ih=window.innerHeight;          
        var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;          
        if(isResp) {                
            if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
                sRatio = lastS;                
            }               
            else if(!isScale) {                 
                if(iw<w || ih<h)                        
                    sRatio = Math.min(xRatio, yRatio);              
            }               
            else if(scaleType==1) {                 
                sRatio = Math.min(xRatio, yRatio);              
            }               
            else if(scaleType==2) {                 
                sRatio = Math.max(xRatio, yRatio);              
            }           
        }           
        canvas.width = w*pRatio*sRatio;         
        canvas.height = h*pRatio*sRatio;
        canvas.style.width = preloaderDiv.style.width = w*sRatio+'px';              
        canvas.style.height = preloaderDiv.style.height = h*sRatio+'px';
        stage.scaleX = pRatio*sRatio;           
        stage.scaleY = pRatio*sRatio;           
        lastW = iw; lastH = ih; lastS = sRatio;     
    }
}
makeResponsive(false,'both',false,1);   

If I remove the resizeCanvas function, drag & drop is working fine on the iPad but the resolution is MUCH worse.

Any ideas for a workaround?

Answer 1

I had a similar problem recently. Have you tried the following ?

shape.on("pressmove", function(evt) {
    var p = stage.globalToLocal(evt.stageX, evt.stageY);
    this.x = p.x + this.offset.x;
    this.y = p.y + this.offset.y;
});

Are you using Animate CC 2017 or Animate 2015.2 ?

I hope that helps,

Dave

Answer 2

My original answer was wrong.

The issue is actually just related to the fact that the stage is scaling, which scales your coordinates. You can solve this by transforming your coordinates to the current scope:

shape.on("pressmove", function(evt) {
    var p = this.globalToLocal(evt.stageX, evt.stageY);
    this.x = p.x + this.offset.x;
    this.y = p.y + this.offset.y;
});

Hope that helps.