Drag and drop HTML5 retina

[Hunsy]

Hello, I have Animate CC HTML5 project where when I drag the element, element just speeds off. I know the problem is lines 29, 30.

projectfile: WeTransfer

this.stop();
//VARIABLES
//Drag Object Size
dragRadius = 40;
//Destination Size
destHeight = 100;
destWidth = 100;
//Circle Creation
var circle = new lib.circle();
var doneDrag = new lib.doneDrag();
doneDrag.x = 300;
doneDrag.y = 150;
stage.addChild(doneDrag);
//Drag Object Creation
//Placed inside a container to hold both label and shape
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle);
dragger.setBounds(200, 200, dragRadius*2, dragRadius*2);
//DragRadius * 2 because 2*r = width of the bounding box
var box = new lib.box();
var destination = new createjs.Container();
destination.x = 350;
destination.y = 50;
destination.setBounds(350, 50, destHeight, destWidth);
destination.addChild(box);
//DRAG FUNCTIONALITY =====================
dragger.on("pressmove", function(evt){
     evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
     stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
     if(intersect(evt.currentTarget, destination)){
       evt.currentTarget.alpha=0.2;
     }else{
       evt.currentTarget.alpha=1;
     }
});
//Mouse UP and SNAP====================
dragger.on("pressup", function(evt) {
  if(intersect(evt.currentTarget, destination)){
    doneDrag.gotoAndPlay(1); 
    //dragger.x = destination.x + destWidth/2;
    //dragger.y = destination.y + destHeight/2;
    stage.removeChild(dragger, destination);//dragger.alpha = 0;
    //destination.alpha = 0;
    stage.update(evt);
  }else{
       dragger.x = dragger.y = 100;
     }
});
//Tests if two objects are intersecting
//Sees if obj1 passes through the first and last line of its
//bounding box in the x and y sectors
//Utilizes globalToLocal to get the x and y of obj1 in relation
//to obj2
//PRE: Must have bounds set for each object
//Post: Returns true or false
function intersect(obj1, obj2){
  var objBounds1 = obj1.getBounds().clone();
  var objBounds2 = obj2.getBounds().clone();
  var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);
  var h1 = -(objBounds1.height / 2 + objBounds2.height);
  var h2 = objBounds2.width / 2;
  var w1 = -(objBounds1.width / 2 + objBounds2.width);
  var w2 = objBounds2.width / 2;
  if(pt.x > w2 || pt.x < w1) return false;
  if(pt.y > h2 || pt.y < h1) return false;
  return true;
}
//Adds the object into stage
stage.addChild(destination, dragger);
stage.mouseMoveOutside = true;
stage.update();

[kglad]

use the trace function to debug.

[Hunsy]

It works perfectly on codepen (FF,Chrome,Edge,Safari), but not Published HTML5 Animate CC project.

EaselJS: Drag and Drop

[GoryGreg]

Does the Registration point of a movie clip symbol affect the drag and drop?

[Hunsy]

Checked, no issues there.

[kglad · Accepted solution]

yes, it does matter.  and the browser matters.

but your video shows a resolution issue.  try evt.stageX/2 etc.

[Hunsy]

Thanks a billion, that worked!

[kglad]

next check your stage's scale as suggested in msg 10.  if it's 2, use that code.

[avid_body16B8]

What do you mean by speed off? I know in Edge Animate there was a problem with draggables positions when the stage was responsive. Maybe the same thing exists here.

[kglad]

evt.stageX etc aren't what he/she expects.

[JoãoCésar]

Hi.

Divide the position by the stage scale. Like this:

evt.currentTarget.x = evt.stageX / stage.scaleX; 
evt.currentTarget.y = evt.stageY / stage.scaleY;

Regards,

JC