You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
` 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());
});`
The text was updated successfully, but these errors were encountered:
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;
}
});`
` nodeGroup.on("dragend", function (evt) {
if (!evt.evt) return;
if (evt.evt.ctrlKey) {
return;
}
});`
The text was updated successfully, but these errors were encountered: