드래그앤드롭 구현하기(라이브러리 X)

리액트에서 드래그앤드롭은 react-beautiful-dnd 라는 편한 라이브러리가 있지만
없이도 충분히 구현하기 쉽다고 해서 없이 해보았다!

import React, {
	useRef,
	useState,
} from 'react';

const Dnd = () => {
	const dragItem = useRef<number | null>(null); // Specify the type for dragItem
	const dragOverItem = useRef<number | null>(null); // Specify the type for dragOverItem
	const [list, setList] = useState<string[]>([
		'Item 1',
		'Item 2',
		'Item 3',
		'Item 4',
		'Item 5',
		'Item 6',
	]);

	const dragStart = (e: React.DragEvent<HTMLDivElement>, position: number) => {
		dragItem.current = position;
		console.log((e.target as HTMLDivElement).innerHTML);
	};

	const dragEnter = (e: React.DragEvent<HTMLDivElement>, position: number) => {
		dragOverItem.current = position;
		console.log((e.target as HTMLDivElement).innerHTML);
	};

	const drop = (e: React.DragEvent<HTMLDivElement>) => {
		const copyListItems = [...list];
		const dragItemContent = copyListItems[dragItem.current as number];
		copyListItems.splice(dragItem.current as number, 1);
		copyListItems.splice(dragOverItem.current as number, 0, dragItemContent);
		dragItem.current = null;
		dragOverItem.current = null;
		setList(copyListItems);
	};

	return (
		<>
			{list &&
				list.map((item, index) => (
					<div
						key={index}
						draggable
						onDragStart={(e) => dragStart(e, index)}
						onDragEnter={(e) => dragEnter(e, index)}
						onDragEnd={drop}
						onDragOver={(e) => e.preventDefault()}
					>
						{item}
					</div>
				))}
		</>
	);
};

export default Dnd;

참고문서