FC2ブログ

ドロップ領域のイベント処理

ドロップ領域のイベント処理


ドラッグ項目がドロップ領域に入ると
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);
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック