KineticJS - Swapping shape positions upon contact/mousemove trigger

I'm using KineticJS and trying to get something done that seems simple enough: trying to get a shape to change position with the shape that's currently being dragged.

The idea is that:

• You pick up a shape on the canvas. This triggers a

mousedown

event listener, which saves the current position of the shape you've picked up.

• While holding the shape, if you trigger the

mouseover

on another shape, that shape's event gets triggered and swaps its position, based on the current shape's saved position.

Here is the relevant code I've written to try to get that working:

Board setup:Simply just setting up the board and calling the needed functions here. I'm not doing anything with the stage, gameBoard, or ctx yet (part of it was for when I tried to get drawImage to work on multiple canvases, but have abandoned that for now).

Board render function:This is where I add all the Kinetic Circle objects into new layers, and give those layers all its own attributes to work with when I call the event handlers. I also set up the event handlers here after adding the layers to the stage. Am I perhaps messing this up by adding too many layers?

I've tried looking at the KineticJS docs and many StackOverflow answers as I could in hopes of finding a solution that would work for me, but nothing I've seen and tried so far (including the suggestions that came up as I wrote this question) seemed to be of help, and I'm aware the way I've gone about this so far is probably far from the best way to accomplish what I want, so I'm open to any suggestions, pointers, answered questions, or whatever can point me in the right direction to what I'm missing in order to get this to work.

In case this is helpful, here is also a visualization of how things look when the board is rendered.

The circles are all Kinetic Circles (orbs for the purpose of what I'm going for), and clicking and dragging one to another, the one that isn't being dragged but hovered over should move to the original position of the dragged circles.

Thanks!

EDIT:

I made a few changes to the code since then. First off, I changed adding many layers to the stage, to just one:

This has had the benefit of making drag and drop much much faster where before, it was going very slow, but I still can't get my objects to swap position.

To be clear, my main issue is knowing which x, y values I should be changing. At the moment in

handleMouseMove

, I've been trying to change:

e.target.attrs.x = newX;
e.target.attrs.y = newY;
// newX and newY can be any number

However, no matter what I change it to, it has no effect. So it would help me to know if I'm changing the wrong thing/place, for example, maybe I'm supposed to be changing the Kinetic Circle from the array I've stored? Thanks again.

EDIT 2:

I think I got it! However, I had to take

this.orbs

and set it in the window at

window.orbs

, and to test it I did:

window.orbs[0][0].x(450);
window.orbs[0][0].draw();

And this caused the x position to change. But putting it in a window does not seem like good practice?

EDIT 3:

I got the orbs to now swap continuously, except for when it's the same orb being swapped again while

mouseover

is continuing to fire. At

mouseup

however, it can be swapped again. I also had to set up multiple layers again to get the

mouseover

events to work while holding another orb, but the performance seems to have improved a little.

I'm going to try and figure out how to get them to be able to swap continuously on the same mouse hold, but in the meantime, here is the code I wrote to achieve this: