React | Drag N Drop

직접 구현할 수도 있지만 유려하지 않다

https://dndkit.com/

https://josiah0208.tistory.com/7

https://medium.com/hcleedev/web-dnd-kit%EC%9C%BC%EB%A1%9C-drag-drop-%EC%88%9C%EC%84%9C-%EB%B3%80%EA%B2%BD-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0-497046dc8d9e

dnd-kit 을 학습해보자

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;

https://velog.io/@hihijin/%EB%93%9C%EB%9E%98%EA%B7%B8%EC%95%A4%EB%93%9C%EB%A1%AD-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0