gridDrag.css

/* *******************************************************************
	grid
******************************************************************** */

.main-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, 120px);
	justify-content: center;
	--gap: 10px;
	gap: 0px var(--gap);
}

/* *******************************************************************
	dragNdrop grid items
******************************************************************** */

.dragtarget {
	outline: 1px dotted gray;
}

.dragtarget.afterend {
	box-shadow: var(--gap) 0px cyan;
}

.dragtarget.beforebegin {
	box-shadow: calc(-1 * var(--gap)) 0px cyan;
}

gridDrag.js

// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event

{
	let dragged = null;
	let dragTarget = null;
	let afterEnd = false;

	const gridElement = document.querySelector(".main-container");

	function find_GridItem_Parent (node) {
		while (node && node.parentNode !== gridElement) {
			node = node.parentNode;
		}
		return node;
	}

	for (const gridItem of gridElement.querySelectorAll(":scope > *")) {

		gridItem.draggable = "true";

		gridItem.addEventListener("dragstart", e => {
			dragged = find_GridItem_Parent(e.target);  // store a ref. on the dragged elem
			console.log(e);
		});

		gridItem.addEventListener("dragover", e => {
			e.preventDefault();  // prevent default to allow drop
			console.log(e);

			const targetItem = find_GridItem_Parent(e.target);
			if (targetItem) {
				if (dragTarget) {
					dragTarget.classList.remove("dragtarget", "afterend", "beforebegin");
				}

				const { left, right } = targetItem.getBoundingClientRect();
				afterEnd = e.pageX > (left + right) / 2;

				if (afterEnd) {
					targetItem.classList.add("dragtarget", "afterend");
				} else {
					targetItem.classList.add("dragtarget", "beforebegin");
				}
				dragTarget = targetItem;
			}
		});

		gridItem.addEventListener("drop", e => {
			e.preventDefault();  // prevent default action (open as a link for some elements)

			console.log(e);

			const targetItem = find_GridItem_Parent(e.target);
			if (targetItem && dragged !== targetItem) {
				// move dragged element to the selected drop target
				console.log("drop success");
				gridElement.removeChild(dragged);

				const position = afterEnd ? 'afterend' : 'beforebegin';
				targetItem.insertAdjacentElement(position, dragged);
			}

			
			dragged = null;
			if (dragTarget) {
				dragTarget.classList.remove("dragtarget", "afterend", "beforebegin");
				dragTarget = null;
			}
		});
	}

}