ドロップ領域のイベント処理
ドラッグ項目がドロップ領域に入ると
dragenterイベントが発生
このイベントが発生したら、ドロップ領域の背景を変更
drop.addEventListener(“dragenter”,fuction(evt){
evt.preventDefault();
drop.style.backgroundColor=””#ecc;
},true);
drop.addEventListener(“dragleave”,fuction(evt){
evt.preventDefault();
drop.style.backgroundColor=”#eee”;
},true);
drop.addEventListener(“dragover”,fuction(evt){
evt.preventDefault();
},true);
dragenterイベントでも
preventDefault()
でブラウザーのデフォルト動作を無効化しておく
ドラッグ項目がドロップ領域からでたら
dragleaveイベントが発生する
このイベントが発生したら
ドロップ領域の背景色を元に戻す
そして、一番重要なのが
dragoverイベント
これがないと
ドラッグ&ドロップできない
中身は
ブラウザーのデフォルト動作を無効化する
preventDefault();
だけでok
処理をまとめてみると
ドラッグ&ドロップは
drop.addEventListener(“dragenter”,fuction(evt){
evt.preventDefault();
//ドロップ領域に入ったときの処理
},true);
drop.addEventListener(“dragleave”,fuction(evt){
evt.preventDefault();
//ドロップ領域からでたときの処理
},true);
//ドラッグ&ドロップの必須
drop.addEventListener(“dragover”,fuction(evt){
evt.preventDefault();
},true);