I'm trying out a tile reshuffle experience in n * 2 grid. Taking reference of snapshot attached, the tile can be placed before tile 1 for putting it at starting position in row 1, or between tile 1 and tile 2 for cases where user wish to push it at position 1-2 in row 1.

For inserting a tile between tile 2 (in row 1) and tile 4 (in row 2), user can hover over after tile 2 in grid, or before tile 4 in row 2. Need to add dotted line as placeholder in both cases.

I'm thinking of two approaches -

1. Adding placeholder divs as drop-zones, and when draggable tile appears there we try to insert at that position. I need to add intermediate divs with drop-zones which I feel can be avoided.
2. Make tiles as drop-zones, and show dotted line when tile overlap is detected. With interact.js I could detect drag-enter and drag-leave events for tile overlap in and out, but there is issue for end of row. Let's say we show placeholder "before" the tile on overlap, how would place it at the end of row 1.

I suspect this is solved issue with grid, I could not find any reference with UX libraries (ex: material-ui) for such in-place (with placeholder in-between tiles) draggable/swap tile/grid layouts. Any directions to think better can help.