Drag and Drop createjs w/ keyboard functionality

[KeelyM]

Hello,

I'm trying to create a drag and drop interaction in Animate CC with an HTML5 document.

Thanks to this tutorial - Drag And Drop (Adobe Animate HTML5) - YouTube  I was able to get the drag and drop interaction I was hoping for (where the object snaps into place once dragged over it's target). I have three objects and three targets on my stage. This part is working perfectly with the mouse, however I'm trying to have it worked with the keyboard as well.

I was able to have my first object move with the arrow keys using this code  -

window.addEventListener("keydown", moveOne.bind(this));
window.addEventListener("keyup", upOne.bind(this));
// define keyboard functions
function moveOne(e){
switch(e.keyCode){
case 37: // left key
card.x -= 6;
break;
case 38: // up key
card.y -= 6;
break;
case 39: // right key
card.x += 6;
break;
case 40: // down key
card.y += 6;
break;
}
}
function upOne(e) {
switch(e.keyCode){
case 37:
console.log("keyUp");
alert(event.currentTarget);
break;
}
}

The keydown function is working and the keyup function seems to be working as well, because it is showing up in the console log.

However, I haven't been able to determine how to make the object snap into place once it's over the correct target using the keyboard like it does using the mouse.

Here's my mouseup function for that part -

function onMouseUp(evt){
console.log("onMouseUp");
var item = evt.currentTarget;
var pt = item.localToLocal(item.dot.x, item.dot.y, item.objective.box);
if (item.objective.box.hitTest(pt.x, pt.y)) {
item.x = item.objective.x;
item.y = item.objective.y; 
}
}

I'm very new to code, but I'm wondering if it has something to do with the evt.currentTarget? (I tried adding onMouseUp(evt); to my keyup function, but that didn't work).  When using the keyboard to control the object is it not the 'current Target' since the mouse isn't over it? If so, is there a way to declare an object as the current Target? Since I have three objects that need to be moved on my stage, I am wondering if there is a way to set one as the 'target' when the project opens up, then have the user be able to tab through the three objects, and depending upon which object is 'selected' that object will then be moveable with the keyboard?

Any help is much appreciated!

[eric_c2ti · Accepted solution]

First off, there is the issue that if you have three objects on-stage that are supposed to land on three different targets, how do you know which object the keyboard is controlling?

But assuming you use the last one clicked or something like that...

Basically, after each keypress, you're going to have to compare the location of some point on the currently selected object against the target point for that object and then essentially decide if it is "close enough" to be labelled a hit and snap it into place.

I'm not super familiar with this part of the EaselJS library yet, so there may be an easier way, but essentially it will be a function like

kbdHitTest( myObj, myTarg ) {

     var closeEnough = 6;

     if( (Math.abs(myObj.x - myTarg.x) <= closeEnough) && (Math.abs(myObj.y - myTarg.y) <= closeEnough) ) {

          myObj.x = myTarg.x;

          myObj.y = myTarg.y;

     }

}

Then, after the switch(e.keyCode) statement in your moveOne function, you'd call kbdHitTest( currentObj, currentTarg );

Hope that helps!

[KeelyM]

Thank you! I had to play with it a little bit, but I got it work!

As far as how to know which object the keyboard is controlling - right now I just have it controlling one object.

I'm wondering if there is a way to define which object I want it to control at the load of the project, then have the user be able to press the

tab key to move through the objects and change the selection (maybe add a 'highlight' frame to each one so the user knows which they are moving). but I haven't figured that part out yet.

I know with the currentTarget method it goes off of where the mouse is pointed (at least I think that's how it works), not sure if there is a way I can set the target with the keyboard?

[eric_c2ti]

When I was doing this in a Flash project, I essentially had a global CurrentSelected variable where I stored a link to whatever was last clicked. So down at the bottom of the onMouseUp function, you could then add something like CurrentSelected = evt.currentTarget, which you would then be able to use in your kbdHitTest somehow.

And yeah, in my Flash project I added a glow filter to the object currently selected.