Skip to main content
Hunsy
Known Participant
July 25, 2018
Answered

Drag and drop HTML5 retina

  • July 25, 2018
  • 3 replies
  • 1155 views

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();

This topic has been closed for replies.
Correct answer kglad

Checked, no issues there.


yes, it does matter.  and the browser matters.

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

3 replies

JoãoCésar17023019
Community Expert
Community Expert
July 25, 2018

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

avid_body16B8
Legend
July 25, 2018

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
Community Expert
Community Expert
July 25, 2018

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

kglad
Community Expert
Community Expert
July 25, 2018

use the trace function to debug.

Hunsy
HunsyAuthor
Known Participant
July 25, 2018

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

EaselJS: Drag and Drop

Inspiring
July 25, 2018

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