Swapping positions of 2 nodes does'nt behave as expected

[KQuangAn]

I want to be able to swap the position of 2 nodes when a node is drag onto another node. In my code the swapping of the position works fine as i can click each node to console.log to see the position of the node has been swapped. But the position of the nodes after being updated is currently in the middle point of two nodes.
I have tried a number of methods including changing the position of only the node being drag, and it still moves the node to the middle point instead at the position of the node that is drag onto

codepen

` nodeGroup.on("dragstart", function (evt) {
if (evt.evt.ctrlKey) {
stage.stopDrag();
stage.startDrag();
return;
}

const draggedNode = evt.target; // The node being drag
draggedNode.zIndex(50); // set the drag node on top
var targetRect = node.getClientRect();
var nodeGroup = evt.currentTarget;
oldColor = nodeGroup.children[0].attrs.fill;
if (nodeGroup) {
  if (nodeGroup.children[0].attrs.fill === "red") return;
  nodeGroup.children[0].attrs.fill = "red";
}
//save the node's original position
draggedNodeStartPosition = { x: nodeGroup.x(), y: nodeGroup.y() };

});`

` nodeGroup.on("dragend", function (evt) {
if (!evt.evt) return;
if (evt.evt.ctrlKey) {
return;
}

var draggedNode = evt.currentTarget; // The node being drag
var draggedRect = draggedNode.getClientRect(); // Dragged node 's bounding box
var hasCollision = false;//check all of the nodes to find the node that is overlapping
for (var n = 0; n < numberOfData; n++) {
  if (`node-${n}` !== draggedNode.id()) {
    // skip checking the node being drag
    const checkNode = stage.find(`#node-${n}`)[0]; // the node being colided or drag into
    const checkRect = checkNode.getClientRect();
    if (hasOverlap(draggedRect, checkRect)) {
      // Swap the positions of the dragged node and the collided node
      const draggedNodeOldPosition = draggedNodeStartPosition;
      const checkNodePosition = { x: checkNode.x(), y: checkNode.y() };

      draggedNode.position(checkNodePosition);
      //checkNode.position(draggedNodeOldPosition);

      // Optional: Update zindex properties if needed
      const draggedNodeZIndex = draggedNode.zIndex();
      draggedNode.zIndex(checkNode.zIndex());
      checkNode.zIndex(draggedNodeZIndex);

      hasCollision = true;
      break; // Exit the loop since we found a collision
    }
  }
}
draggedNode.getLayer().draw(); //reset layer

// If there was no collision, update the old position
if (!hasCollision) {
  draggedNode.position(draggedNodeStartPosition);
}

const targetRect = evt.target.getClientRect();
nodeGroup.children[0].attrs.fill = oldColor;
var target = stage.getIntersection(stage.getPointerPosition());

});`

[lavrton]

Can you make a very small demo? The current one is too large. Remove everything unrelated to the issue.