diff --git a/frontend/src/components/CarManagement.jsx b/frontend/src/components/CarManagement.jsx index 977883a..9751ff7 100644 --- a/frontend/src/components/CarManagement.jsx +++ b/frontend/src/components/CarManagement.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useCallback, useRef } from 'react'; import { api } from '../api.js'; import { isInspectionExpirySoon } from '../utils/carUtils.js'; import styles from './CarManagement.module.css'; @@ -20,6 +20,8 @@ export default function CarManagement({ reloadKey = 0 }) { const [editEtc, setEditEtc] = useState(false); const [editTire, setEditTire] = useState('ノーマル'); const [submitting, setSubmitting] = useState(false); + const [dragOverIdx, setDragOverIdx] = useState(null); + const dragSrcIdx = useRef(null); const loadCars = useCallback(async () => { try { @@ -116,11 +118,7 @@ export default function CarManagement({ reloadKey = 0 }) { } }; - const handleReorder = async (index, direction) => { - const newCars = [...cars]; - const swapIndex = index + direction; - if (swapIndex < 0 || swapIndex >= newCars.length) return; - [newCars[index], newCars[swapIndex]] = [newCars[swapIndex], newCars[index]]; + const applyReorder = async (newCars) => { setCars(newCars); try { await api.reorderCars(newCars.map((c) => c.id)); @@ -130,6 +128,40 @@ export default function CarManagement({ reloadKey = 0 }) { } }; + const handleReorder = async (index, direction) => { + const swapIndex = index + direction; + if (swapIndex < 0 || swapIndex >= cars.length) return; + const newCars = [...cars]; + [newCars[index], newCars[swapIndex]] = [newCars[swapIndex], newCars[index]]; + await applyReorder(newCars); + }; + + const handleDragStart = (index) => { + dragSrcIdx.current = index; + }; + + const handleDragOver = (e, index) => { + e.preventDefault(); + setDragOverIdx(index); + }; + + const handleDragEnd = () => { + setDragOverIdx(null); + dragSrcIdx.current = null; + }; + + const handleDrop = async (e, dropIndex) => { + e.preventDefault(); + const srcIndex = dragSrcIdx.current; + setDragOverIdx(null); + dragSrcIdx.current = null; + if (srcIndex === null || srcIndex === dropIndex) return; + const newCars = [...cars]; + const [moved] = newCars.splice(srcIndex, 1); + newCars.splice(dropIndex, 0, moved); + await applyReorder(newCars); + }; + return (