react18
typescript
dnd-kit/core 6
複数コンテナで双方向のドラッグ&ドロップを作ろうとしています。
どこにドラッグされているかを判断するためhandleDracgOverで over.idまたはover.data.current.sortable.indexを取得したいと考えています。
しかしながら、特定条件の場合、連なる別のdraggableエリアの値をとるケースに遭遇しております。
色々調べてはいるのですが、調査方法など手詰まりとなっております。
原因や調査方法など何でもない構いませんので、教えていただけるとありがたいです。
例えば、hogeId内の要素をaIdのエリアにドラッグした時、bId内の要素IDが取得されることがあります。
(hogeIdエリアとaIdエリアbIdエリアは横並びとなります)
aId内の要素がない部分が広め?(閾値が不明)でかつ aIdのheight>bIdのheightの場合に発生します。
aIdエリアの上部では発生せず、bIdエリアに近い場所で発生します。
(aIdのエリアとbIdのエリアはdisplay:flexでflexDirection:columnのため縦に並んで表示されます)
aIdとbIdのheightが同じ場合は発生しません。
開発者ツール等でElementの重なりを調べましたが、重なっているところは見受けられませんでした。
また、各種idはユニークな値です。
ソースコピペができないため一部省略ご容赦ください
//parent.tsx
<div style={{display:”flex”,flexDirection:”row”}}>
<DndContext>
<div style={{height:”100%”, width=“250px”}}>
<hoge itemsF={itemsF} />
</div>
<div style={{height:”100%”}}>
<fuga itemsA={itemsA} itemsB={itemsB} itemsC={itemsC} />
</div>
<DragOverlay>
hoge
</DragOverlay>
</DndContext>
</div>
//hoge.tsx
const id=“hogeId”
const {setNodeRef} = useDroppable({id:id});
<div style={{height:”100%”,width:”250px”,overflow:”auto”}}>
<TextField />
<SortableContext id={id} items={itemsF} strategy={rectSortingStrategy}>
<div ref={setNodeRef} >
{itemsF.map(item) => <itemF key={item.id} item={item} />)}
</div>
</SortableContext>
//itemF.tsx
const {attribute, listeners, setNodeRef,transform,transition}=useSortable({id:item.id});
<div id={item.id} ref={setNodeRef} >//attribute等の設定割愛
表示内容割愛
</div>
//fuga.tsx
const aId=“aId”
const {setNodeRef:setANodeRef} = useDroppable({id:aId});
const bId=“bId”
const {setNodeRef :setBNodeRef} = useDroppable({id:bId});
<div style={{height:”100%”,width:”300px”,display:”flex”, flexDirection:”row”, position:”relative”}}>
<div style={{height:”100%”,width:”260px”,display:”flex”, flexDirection:”column”}}>
<SortableContext id={aId} items={itemsA} strategy={rectSortingStrategy}>
<div ref={setANodeRef} >
{itemsA.map(item) => <itemC key={item.id} item={item} />)}
</div>
</SortableContext>
<SortableContext id={bId} items={itemsB} strategy={rectSortingStrategy}>
<div ref={setBNodeRef} >
{itemsB.map(item) => <itemC key={item.id} item={item} />)}
</div>
</SortableContext>
</div>
//itemC.tsx
const {attribute, listeners, setNodeRef,transform,transition}=useSortable({id:item.id});
<div id={item.id} ref={setNodeRef} >//attribute等の設定割愛
表示内容割愛
</div>