How to adjust Target area for Drag & Drop in Animate CC with a Responsive Canvas

Question

I'm working on making a drag and drop more accurate than just rectangles and circles, and it seems to be going well so far. The only problem is that the target area doesn't match up with where the shape actually is.

In this demo, I have a mostly working, will drag the object, and it goes over the drop areas just fine. The only problem is that the drop areas are being translated into something that's a little bit above the drop zone (which is supposed to be the food in the dish).

The correct placement is for the tip to go into the top. The incorrect placement is to stick the tip in the side of the food.

I think it has something to do with the intersect function at the end, but I'm not sure.

This is the relevant code:

//dragger object
var dragger = this.thermometer;

//Correct and incorrect drop spaces.
var right = this.AreaCorrect;
var wrong = this.AreaWrong;

dragger.on("pressmove", function(evt){
    evt.currentTarget._goto(0);
    evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;

    //can remove this whole thing in the final version
    if(intersect(evt.currentTarget.drag, right)){
        evt.currentTarget.alpha=.5;

    }else if(intersect(evt.currentTarget.drag, wrong)){
        evt.currentTarget.alpha=.2;

    }else{
        evt.currentTarget.alpha=1;
    }

    stage.update(evt);
}, this);

dragger.on("pressup", function(evt){
    //lock position of drag object and play animation if any
    dragger.x = dragger.x;
    dragger.y = dragger.y;

    //remove the alpha changes in final
    if(intersect(evt.currentTarget.drag, right)){
        dragger.mouseEnabled = false;
        dragger.play();
        exportRoot.fb_reading.gotoAndPlay(1);
        evt.currentTarget.alpha=1;

    }else if(intersect(evt.currentTarget.drag, wrong)){
        dragger.mouseEnabled = false;;
        dragger.play();
        exportRoot.fb_reading.gotoAndPlay(50);
        evt.currentTarget.alpha=1;
    }

    stage.update(evt);
}, this);

//returns true or false
function intersect(drag, target){
    var pt = drag.localToLocal(drag.x, drag.y, target);
    if(target.hitTest(pt.x, pt.y)){
        return true;
    }else{
        return false;
    }
}

Also, for some reason, sometimes (but not always), moving the anchor point of the object with the transform tool can help to move the target area.

I used the code here to update my intersect function from a codepen that I was using before.

Again, Demo link: https://mhardingfoodsafe.github.io/dragndropNEW/

Looking at the demo link, I´m noticing that your canvas is responsive. The drag/drop behaviour your are looking for, was working as expected when the canvas was not responsive? — cristiancajiaos, May 17 '17 at 15:41
Oh... yeah. I guess I still need to figure that out. It works fine while the canvas is close to the normal size, but it wasn't before. It was acting weird even when it was normal sized. — Mike, May 17 '17 at 15:45
Haven't seen if this works yet, but this might be what fixes it http://stackoverflow.com/questions/43413936/drag-and-drop-with-easeljs-in-animate-cc-2017 — Mike, May 17 '17 at 16:02

Mike · Answer 1 · 2017-05-18T15:29:26.240

I think this is the best way (that I've found...) to do it. What I had done was converted the buttons to movieclips, but animateCC didn't quite convert it as good as it should have. I had to delete those and make a fresh movieclip that only had one frame and one layer where the area should be.

From there, I changed the intersect function as follows:

function intersect(drag, target){
    var pt = drag.globalToLocal(target.x, target.y); //-----This line
    if(target.hitTest(pt.x, pt.y)){
        return true;
    }else{
        return false;
    }
}

It used to be localToLocal() but that was messing it up, so I made it to globalToLocal(). This was causing it to register well above the actual points, for reasons I don't know.

At this point, it's just figuring out how to scale the drop target locations while still keeping this responsive.

Noting that in your function you are using your drag just for checking intersection: To avoid using your drag (or other DisplayObjects) directly, your could use the method `clone()`. Ex (taking your code): `dragLocation = drag.clone()`. — cristiancajiaos, May 17 '17 at 16:05

How to adjust Target area for Drag & Drop in Animate CC with a Responsive Canvas

1 Answers1