import React, { ComponentProps, useEffect, useRef, useState } from "react"; /** * 配列の要素を移動させる */ function moveItem( arr: T[], currentIndex: number, targetIndex: number ) { const targetItem = arr[currentIndex]; let resArr = arr.map((target, i) => (i === currentIndex ? null : target)); resArr.splice(targetIndex, 0, targetItem); return resArr.flatMap((target) => (target !== null ? [target] : [])); } export type Item = { id: string; data: T; }; type Props = { initItems: Item[]; onChange?: (newItems: Item[]) => void; }; export function Draggable({ initItems, onChange }: Props) { const [items, setItems] = useState([...initItems]); const $refs = useRef>(new Map()); const [activeId, setActiveId] = useState(null); const [targetIndex, setTargetIndex] = useState(-1); useEffect(() => { setItems([...initItems]); }, [initItems]); /** * refを受け取ってMapに格納する */ const setElm = (id: string, elm: HTMLElement | null) => { if (elm) { $refs.current.set(id, elm); } else { $refs.current.delete(id); } }; /** * ドラッグを開始する要素に設定するpropsを生成する */ const getHandleProps = ( item: Item, index: number ): ComponentProps<"li"> => { return { onDragStart(event) { // activeIdを設定 setActiveId(item.id); // ドラッグしているデータと許容する動作を設定 event.dataTransfer.setData("text/plain", item.id); event.dataTransfer.dropEffect = "move"; event.dataTransfer.effectAllowed = "move"; // ドラッグ時に表示される画像(要素)を設定 const elm = $refs.current.get(item.id); if (elm) { const rect = elm.getBoundingClientRect(); const posX = event.clientX - rect.left; const posY = event.clientY - rect.top; event.dataTransfer.setDragImage(elm, posX, posY); } }, onDragEnd(event) { // activeIdから移動中のアイテムのindexを取得 const currentIndex = items.findIndex( (target) => target.id === activeId ); // indexが有効範囲であれば移動を実行 if (currentIndex >= 0 && targetIndex >= 0) { const newItems = moveItem(items, currentIndex, targetIndex); setItems(newItems); // コールバックを呼び出す onChange?.(newItems); } // stateを初期化 setActiveId(null); setTargetIndex(-1); } }; }; /** * ドラッグ先の要素に設定するpropsを生成する */ const getItemProps = (item: Item, index: number): ComponentProps<"li"> => { return { key: item.id, draggable: true, ref(elm) { setElm(item.id, elm); }, onDragOver(event) { event.preventDefault(); const elm = $refs.current.get(item.id); if (!elm) return; // カーソルが当たっている要素の相対位置情報を取得 const rect = elm.getBoundingClientRect(); // 要素内でのカーソル位置 const posY = event.clientY - rect.top; // 要素の縦幅に対しての割合(念のため0-1に丸めておく) const ratioY = Math.min(1, Math.max(0, posY / rect.height)); // 移動先のindexを更新 setTargetIndex(index + Math.round(ratioY)); }, // 初期のイベントはキャンセルしておく(制御されていないEventの発生を無くすため) onDragEnter(event) { event.preventDefault(); }, onDragLeave(event) { event.preventDefault(); }, onDrop(event) { event.preventDefault(); } }; }; const getGhostProps = ( item: Item, index: number ): ComponentProps<"li"> => { return { onDragOver(event) { event.preventDefault(); // ゴーストの表示位置 = 移動先のindexなので座標計算は必要ない setTargetIndex(index); }, onDragEnter(event) { event.preventDefault(); }, onDragLeave(event) { event.preventDefault(); }, onDrop(event) { event.preventDefault(); } }; }; // 表示用のJSX.Elementを生成する const getViews = (): JSX.Element[] => { let views = items.map((item, index) => { return (

{item.data}

); }); if (activeId && targetIndex >= 0) { const ghostItem = items.find((target) => target.id === activeId); // ゴーストが必要なら作成 if (ghostItem) { const ghost = (

{ghostItem.data}

); // targetIndexの位置にゴーストを挿入 views = [ ...views.slice(0, targetIndex), ghost, ...views.slice(targetIndex) ]; } } return views; }; return ( <>

{getViews()}

Active ID: {activeId ?? "null"}

Target Index: {targetIndex}

ゴースト付き

); }

cocky-cray-r75rh7