DataTransfer.setData
第1引数は"text/plain"などのデータ型らしい
でも実際、任意のstringを渡すことが出来る
例
Draggable item側でsetDataして、
code:draggedItem.ts
export const DraggedItem: React.FC<Props> = ({ hgoe }) => {
const handleDragStart = useCallback((e: React.DragEvent) => {
e.dataTransfer.setData("text/plain", hoge); // データをセット
}, []);
return (
<div onDragStart={handleDragStart} draggable>
...
</div>
);
};
code:ts
export const Dropzone: React.FC<Props> = ({ children }) => {
const handleDragOver = useCallback((e: React.DragEvent) => {
e.preventDefault();
}, []);
const handleDrop = useCallback((e: React.DragEvent) => {
e.preventDefault();
const value = e.dataTransfer.getData("text"); // データを取得
alert(value);
}, []);
return (
<div onDrop={handleDrop} onDragOver={handleDragOver}>
{children}
</div>
);
};