diff --git a/frontend/src/components/DraggableDroppableTagRow.tsx b/frontend/src/components/DraggableDroppableTagRow.tsx index f465bea..0e24398 100644 --- a/frontend/src/components/DraggableDroppableTagRow.tsx +++ b/frontend/src/components/DraggableDroppableTagRow.tsx @@ -57,7 +57,8 @@ const DraggableDroppableTagRow: FC = ({ tag, nestLevel, pathKey, parentTa isDragging: dragging } = useDraggable ({ id: dndId, data: { kind: 'tag', tagId: tag.id, - parentTagId } }) + parentTagId, + nestLevel } }) const { setNodeRef: setDropRef, isOver: over } = useDroppable ({ id: dndId, @@ -90,18 +91,20 @@ const DraggableDroppableTagRow: FC = ({ tag, nestLevel, pathKey, parentTa e.stopPropagation () } }} - ref={node => { - setDragRef (node) - setDropRef (node) - }} - style={style} + ref={setDropRef} className={cn ( 'min-w-0 max-w-full overflow-hidden rounded select-none', + sp && 'touch-pan-y', over && 'ring-2 ring-offset-2')} - {...attributes} - {...listeners}> + > = ({ className, post, sp }) => { sp = Boolean (sp) @@ -212,7 +218,7 @@ const TagDetailSidebar: FC = ({ className, post, sp }) => { return tagsTmp }, [post]) - const [activeTagId, setActiveTagId] = useState (null) + const [activeTagDrag, setActiveTagDrag] = useState (null) const [dragging, setDragging] = useState (false) const [saving, setSaving] = useState (false) const [tags, setTags] = useState (baseTags) @@ -328,9 +334,20 @@ const TagDetailSidebar: FC = ({ className, post, sp }) => { { + const byPointer = pointerWithin (args) + return byPointer.length > 0 ? byPointer : rectIntersection (args) + }} onDragStart={e => { if (e.active.data.current?.kind === 'tag') - setActiveTagId (e.active.data.current?.tagId ?? null) + { + const tagId = e.active.data.current?.tagId + const nestLevel = e.active.data.current?.nestLevel + setActiveTagDrag ( + tagId == null || nestLevel == null + ? null + : { tagId, nestLevel }) + } setDragging (true) suppressClickRef.current = true document.body.style.userSelect = 'none' @@ -341,13 +358,13 @@ const TagDetailSidebar: FC = ({ className, post, sp }) => { suppressClickRef.current = false}, { capture: true, once: true }) }} onDragCancel={() => { - setActiveTagId (null) + setActiveTagDrag (null) setDragging (false) document.body.style.userSelect = '' suppressClickRef.current = false }} onDragEnd={async e => { - setActiveTagId (null) + setActiveTagDrag (null) setDragging (false) await onDragEnd (e) document.body.style.userSelect = '' @@ -443,9 +460,11 @@ const TagDetailSidebar: FC = ({ className, post, sp }) => {
- {activeTagId != null && (() => { - const tag = findTag (tags, activeTagId) - return tag && + {activeTagDrag != null && (() => { + const tag = findTag (tags, activeTagDrag.tagId) + return ( + tag + && ) }) ()}