#184 修正

frontend/package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@fontsource-variable/noto-sans-jp": "^5.2.9",
         "@radix-ui/react-dialog": "^1.1.14",
@@ -400,6 +401,20 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
+      "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@dnd-kit/utilities": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/noto-sans-jp": "^5.2.9",
     "@radix-ui/react-dialog": "^1.1.14",

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -54,7 +54,7 @@ export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef }: Pro
       data: { kind: 'tag', tagId: tag.id } })
 
   const style: CSSProperties = { transform:   CSS.Translate.toString (transform),
-				 opacity:     dragging ? .5 : 1 }
+				 visibility:  dragging ? 'hidden' : 'visible' }
 
   return (
       <div

frontend/src/components/TagDetailSidebar.tsx

@@ -1,9 +1,11 @@
 import { DndContext,
+	 DragOverlay,
 	 MouseSensor,
 	 TouchSensor,
 	 useDroppable,
 	 useSensor,
 	 useSensors } from '@dnd-kit/core'
+import { restrictToWindowEdges } from '@dnd-kit/modifiers'
 import axios from 'axios'
 import toCamel from 'camelcase-keys'
 import { AnimatePresence, motion } from 'framer-motion'
@@ -11,6 +13,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import DraggableDroppableTagRow from '@/components/DraggableDroppableTagRow'
+import TagLink from '@/components/TagLink'
 import TagSearch from '@/components/TagSearch'
 import SectionTitle from '@/components/common/SectionTitle'
 import SubsectionTitle from '@/components/common/SubsectionTitle'
@@ -152,6 +155,7 @@ type Props = { post: Post | null }
 
 
 export default (({ post }: Props) => {
+  const [activeTagId, setActiveTagId] = useState<number | null> (null)
   const [dragging, setDragging] = useState (false)
   const [saving, setSaving] = useState (false)
   const [tags, setTags] = useState ({ } as TagByCategory)
@@ -304,7 +308,9 @@ export default (({ post }: Props) => {
 	<TagSearch/>
 	<DndContext
 	    sensors={sensors}
-	    onDragStart={() => {
+	    onDragStart={e => {
+	      if (e.active.data.current?.kind === 'tag')
+		setActiveTagId (e.active.data.current?.tagId ?? null)
 	      setDragging (true)
 	      suppressClickRef.current = true
 	      document.body.style.userSelect = 'none'
@@ -316,15 +322,18 @@ export default (({ post }: Props) => {
 	      }, { capture: true, once: true })
 	    }}
 	    onDragCancel={() => {
+	      setActiveTagId (null)
 	      setDragging (false)
 	      document.body.style.userSelect = ''
 	      suppressClickRef.current = false
 	    }}
-	    onDragEnd={e => {
+	    onDragEnd={async e => {
+	      setActiveTagId (null)
 	      setDragging (false)
-	      onDragEnd (e)
+	      await onDragEnd (e)
 	      document.body.style.userSelect = ''
-	    }}>
+	    }}
+	    modifiers={[restrictToWindowEdges]}>
 	  <motion.div key={post?.id ?? 0} layout>
 	    {CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
 		<motion.div layout className="my-3" key={cat}>
@@ -385,6 +394,15 @@ export default (({ post }: Props) => {
 		  </ul>
 		</div>)}
 	  </motion.div>
+
+	  <DragOverlay adjustScale={false}>
+	    <div className="pointer-events-none">
+	      {activeTagId != null && (() => {
+		const tag = findTag (tags, activeTagId)
+		return tag && <TagLink tag={tag}/>
+	      }) ()}
+	    </div>
+	  </DragOverlay>
 	</DndContext>
       </SidebarComponent>)
 }) satisfies FC<Props>