How to swap two cards without changing position other cards

Question

I have images in grid form something like this

I am well aware of react dnd and it uses hover to get the positions and swap accordingly.

What I want

: Swap 1 with 4 and 4 with 1

What is happening:

While moving image 1 I am hovering it from 2 and 3 so the images in between are getting swapped here

I have modified my moveCard function to match my requirement.

const moveCard = useCallback((dragIndex, hoverIndex) => {
      const dragCard = cards;
      [dragCard[dragIndex], dragCard[hoverIndex]] = [
        dragCard[hoverIndex],
        dragCard[dragIndex]
      ];
      setCards([...dragCard]);
    });

Any help will be appreciated. All I want is to swap only 2 images that I am dragging and which I dropping, the rest images should not change their position.

Answer 1

Here's the solution I've found. My state is more complex, so I use immutability-helper which provides update function below

const moveCard = useCallback((dragIndex, hoverIndex) => {
        setCards((prevCards) =>
            update(prevCards, {
                $splice: [
                    [dragIndex, 1], // remove the card we're dragging
                    [dragIndex, 0, prevCards[hoverIndex]], // put the card we're hovering over in it's place
                    [hoverIndex, 1], // remove the card we're hovering over
                    [hoverIndex, 0, prevCards[dragIndex]], // insert dragged card into hover cards's position
                ],
            }),
        )
}, [])