DataTransfer.dropEffect

D&D中に、ユーザに与えるフィードバックを制御する

dropzone側に指定するのが、DataTransfer.dropEffect

daggable item側に指定するのが、DataTransfer.effectAllowed

4つの値がある

copy

move

link

none

このページの下部にdemoがあって、4種類見れる

https://gyazo.com/55ec623afdbb941bddc55f8b577de75b

ポインタのアイコンが変わっているのがわかる

DataTransfer.effectAllowedと対で使う場合は権限指定みたいな感じで、

対で使わない場合は単にポインタの表示を変えるやつ、みたいな感じだろうかmrsekut.icon

だいぶ雑な理解だけど

mutableに代入する

code:ts

const handleDragOver = useCallback((e: React.DragEvent) => {

e.preventDefault();

e.dataTransfer.dropEffect = 'move';

setInDropzone(true);

}, []);