0

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>

1 件の回答 1

0

自己解決しました。
上記質問への記載を省略してしまいましたが、DndContextにcollisionDetection={closestCorners}を設定していたことが原因でした。
4つ角に一番近いDroppableエリアを検出するようになるため、bIdエリアが小さく、aIdエリアのbIdエリアに近い場所にドロップすると4つ角の近いbIdがDroppableエリアと判断されていました。
ソースコピペができないとはいえ一部省略してしまい大変失礼しました。
どなたかのお役に立てれば幸いです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。