要求

React DnD でネストされたコンポーネントがあるとき、子要素の範囲をドラッグしようとしてもドラッグされないようにすること。

const Child = () => <div style={{width: 25, height: 25}}></div>; // この要素が存在する部分ではドラッグできないようにしたい

const Parent = () => <div style={{width: 50, height: 50}}><Child /></div>;

解決法

Child コンポーネントを以下のように変更することでドラッグが発生しなくなる。

const Child = () => <div draggable onDrag={e => e.preventDefault()} style={{width: 25, height: 25}}></div>;

参考

https://github.com/react-dnd/react-dnd/issues/335