ドラッグアンドドロップについて
ドラッグアンドドロップについて
■ドラッグアンドドロップについて
ブラウザ と OS 間で、ドラッグアンドドロップを使って、データをやり取りする事ができます。
DragEvent と、DataTransfer クラスを使用します。
HTML5 で標準化されている API ですが、InternetExplorer 6 でも利用可能です。
■DragEvent について
DragEvent は、ドラッグアンドドロップ時に発生するイベントです。
このページでは、主に DragEvent の使い方を解説しています。
■DataTransfer クラスについて
DataTransfer クラスは、「データを格納する入れ物」として使用します。
DataTransfer については、こちらで解説しています。
■データフォーマットについて
■ドラッグアンドドロップできるフォーマットについて
ドラッグアンドドロップできるデータのタイプは、以下の種類があります。
| ・ | 文字列 |
| ・ | リンク |
| ・ | HTML 文字列（HTML5 世代） |
| ・ | ファイル（HTML5 世代） |
■ファイルアクセスについて
ユーザーが任意のファイルをドロップした場合、そのファイルへアクセスが可能になります。
デフォルトのドラッグを無効化する
■デフォルトのドラッグについて
エレメントの種類によっては、マウスでドラッグ操作を行うと、デフォルトでドラッグが発生します。
例えば、IMG 要素をドラッグした場合、src プロパティのコピーが発生します。
例えば、テキストを選択してドラッグした場合、文字列のコピーが発生します。
■任意のエレメントから、ドラッグを開始したか調べる
ドラッグを開始したか調べるには、ondragstart イベントを使用します。
任意のエレメントから、ドラッグを開始したか調べる
<html>
<body>
<img id="aaa" src="http://hakuhin.jp/graphic/title.png" width="312" height="112" >
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行されるイベント
// ------------------------------------------------------------
element.ondragstart = function (e){
console.log("ドラッグを開始した");
};
//-->
</script>
</body>
</html>
■デフォルトのドラッグを無効化する
■イベントリスナーの場合
イベントリスナーを使って、デフォルトのドラッグを無効化する
<html>
<body>
<img id="aaa" src="http://hakuhin.jp/graphic/title.png" width="312" height="112" >
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行される関数
// ------------------------------------------------------------
function DragStartFunc(e){
// デフォルトのドラッグを無効化する
e.preventDefault();
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ開始時に実行されるイベント
element.addEventListener("dragstart",DragStartFunc);
}
//-->
</script>
</body>
</html>
■イベントハンドラの場合
イベントハンドラ利用時も、イベントリスナーと同様です。
DOM Events 非対応環境では、false 値を返却します。
イベントハンドラを使って、デフォルトのドラッグを無効化する
<html>
<body>
<img id="aaa" src="http://hakuhin.jp/graphic/title.png" width="312" height="112" >
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行される関数
// ------------------------------------------------------------
function DragStartFunc(e){
if(!e) e = window.event; // レガシー
if(e.preventDefault){
// デフォルトのドラッグを無効化する
e.preventDefault();
}else{
// デフォルトのドラッグを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// アタッチイベントに対応している
if(element.attachEvent){
// ドラッグ開始時に実行されるイベント
element.attachEvent("ondragstart",DragStartFunc);
// イベントハンドラを使用する
}else{
// ドラッグ開始時に実行されるイベント
element.ondragstart = DragStartFunc;
}
//-->
</script>
</body>
</html>
デフォルトのドロップを無効化する
■デフォルトのドロップについて
エレメントの種類によっては、マウスでドロップ操作を行うと、デフォルトで受け取りが発生します。
例えば、INPUT 要素にドラッグした場合、文字列の受け取りが発生します。
■任意のエレメント上で、ドロップしたか調べる
ドロップしたか調べるには、ondrop イベントを使用します。
任意のエレメント上で、ドロップしたか調べる
<html>
<body>
<input id="aaa" type="text" style="font-size:32px;" >
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドロップした時に実行されるイベント
// ------------------------------------------------------------
element.ondrop = function (e){
console.log("ドロップした");
};
//-->
</script>
</body>
</html>
■デフォルトのドロップを無効化する
■イベントリスナーの場合
イベントリスナーを使って、デフォルトのドロップを無効化する
<html>
<body>
<input id="bbb" type="text" style="font-size:32px;" >
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドロップした時に実行される関数
// ------------------------------------------------------------
function DropFunc(e){
// デフォルトのドロップを無効化する
e.preventDefault();
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ中にマウスカーソルを移動すると実行されるイベント
element.addEventListener("drop",DropFunc);
}
//-->
</script>
</body>
</html>
■イベントハンドラの場合
イベントハンドラ利用時も、イベントリスナーと同様です。
DOM Events 非対応環境では、false 値を返却します。
イベントハンドラを使って、デフォルトのドロップを無効化する
<html>
<body>
<input id="bbb" type="text" style="font-size:32px;" >
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドロップした時に実行される関数
// ------------------------------------------------------------
function DropFunc(e){
if(!e) e = window.event; // レガシー
if(e.preventDefault){
// デフォルトのドロップを無効化する
e.preventDefault();
}else{
// デフォルトのドロップを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// アタッチイベントに対応している
if(element.attachEvent){
// ドロップしたときに実行されるイベント
element.attachEvent("ondrop",DropFunc);
// イベントハンドラを使用する
}else{
// ドロップしたときに実行されるイベント
element.ondrop = DropFunc;
}
//-->
</script>
</body>
</html>
データのドラッグを開始する
データのドラッグを開始する
１．任意のエレメントのドラッグ操作を有効にする
任意のエレメントの、ドラッグ操作を有効にするには、draggable 属性を使用します。
true をセットします。
任意のエレメント上で、ドラッグ操作を行うと、必ず ondragstart イベントが発行されるようになります。
静的に draggable プロパティを追加する
<html>
<body>
<div draggable="true" style="width:400px; height:300px; background:#fcc;" ></div>
</body>
</html>
動的に draggable プロパティを追加する
// エレメントを作成する
var element = document.createElement("div");
// スタイルを設定
element.style.cssText = "width:400px; height:300px; background:#fcc;";
// エレメントのドラッグ操作を有効
element.draggable = true;
// BODY のノードリストに登録する
document.body.appendChild(element);
２．draggable 属性が無効の場合
InternetExplorer 9 以前の場合は、draggable 属性に対応していません。
任意のエレメントの上で、ドラッグ操作をしてもドラッグイベントは発生しません。
ただしユーザーが、あらかじめエレメントを選択状態にしていれば、ドラッグイベントは発生します。
<IMG> や <A> 要素を利用すると、選択状態に関係なくドラッグイベントを発生させる事ができます。
３．任意のエレメントから、ドラッグを開始したか調べる
ドラッグを開始したか調べるには、ondragstart イベントを使用します。
ドラッグを開始したか調べる
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;" ></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行されるイベント
// ------------------------------------------------------------
element.ondragstart = function (e){
console.log("ドラッグを開始した");
};
//-->
</script>
</body>
</html>
４．任意のデータを格納する
登録したコールバック関数の引数から、DragEvent オブジェクトが得られます。
DragEvent オブジェクトの dataTransfer プロパティから、DataTransfer オブジェクトが得られます。
DataTransfer オブジェクトに、任意のデータを格納する方法については、こちらで解説しています。
ドラッグ時に文字データをセットする
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;" ></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行される関数
// ------------------------------------------------------------
function DragStartFunc(e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// DataTransfer オブジェクト
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
var data_transfer = e.dataTransfer;
// DataTransfer オブジェクトに文字データをセットする
data_transfer.setData("text","テスト用文字列です");
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ開始時に実行されるイベント
element.addEventListener("dragstart",DragStartFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
// ドラッグ開始時に実行されるイベント
element.attachEvent("ondragstart",DragStartFunc);
// イベントハンドラを使用する
}else{
// ドラッグ開始時に実行されるイベント
element.ondragstart = DragStartFunc;
}
//-->
</script>
</body>
</html>
ドラッグ側のイベント一覧
ドラッグ側のイベントは、以下の種類があります。
| イベント名 | 型 | 解説 |
| ondragstart | DragEvent | ドラッグ開始時に実行されるイベント |
| ondrag | DragEvent | ドラッグ中にマウスカーソルを移動すると実行されるイベント |
| ondragend | DragEvent | ドラッグ終了時に実行されるイベント |
ドラッグ側のイベント
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;" ></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行される関数
// ------------------------------------------------------------
function DragStartFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドラッグを開始した");
}
// ------------------------------------------------------------
// ドラッグ中にマウスカーソルを移動すると実行される関数
// ------------------------------------------------------------
function DragFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドラッグ中にマウスカーソルを移動した");
}
// ------------------------------------------------------------
// ドラッグを終了した時に実行される関数
// ------------------------------------------------------------
function DragEndFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドラッグを終了した");
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ開始時に実行されるイベント
element.addEventListener("dragstart",DragStartFunc);
// ドラッグ中にマウスカーソルを移動すると実行されるイベント
element.addEventListener("drag",DragFunc);
// ドラッグ終了時に実行されるイベント
element.addEventListener("dragend",DragEndFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
// ドラッグ開始時に実行されるイベント
element.attachEvent("ondragstart",DragStartFunc);
// ドラッグ中にマウスカーソルを移動すると実行されるイベント
element.attachEvent("ondrag",DragFunc);
// ドラッグ終了時に実行されるイベント
element.attachEvent("ondragend",DragEndFunc);
// イベントハンドラを使用する
}else{
// ドラッグ開始時に実行されるイベント
element.ondragstart = DragStartFunc;
// ドラッグ中にマウスカーソルを移動すると実行されるイベント
element.ondrag = DragFunc;
// ドラッグ終了時に実行されるイベント
element.ondragend = DragEndFunc;
}
//-->
</script>
</body>
</html>
ドラッグ側の許可エフェクトを設定する
ドラッグ開始時に、許可エフェクトを設定する方法は、こちらで解説しています。
ドラッグ中にイメージを表示する（HTML5世代）
ドラッグを開始すると、ドラッグ発生地点のエレメントが、マウスカーソルに追従するように描画されます。
ドラッグ中に描画されるエレメントを変更する方法は、こちらで解説しています。
ドロップでデータを受け取る
ドロップでデータを受け取る
１．任意のエレメント上で、ドラッグしながらマウスカーソルを移動したか調べる
ドラッグしながらマウスカーソルを移動したか調べるには、ondragover イベントを使用します。
任意のエレメント上で、ドラッグしながらマウスカーソルを移動したか調べる
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグしながらマウスカーソルを移動した時に実行されるイベント
// ------------------------------------------------------------
element.ondragover = function (e){
console.log("ドラッグしながらマウスカーソルを移動した");
};
//-->
</script>
</body>
</html>
２．任意のエレメント上で、ドロップ操作を許可する
ドロップ操作を許可するには、ondragover イベントのデフォルトの動作をキャンセルします。
任意のエレメント上でドラッグ操作を行うと、マウスアイコンが変化するようになります。
任意のエレメント上でドロップ操作を行うと、必ず ondrop イベントが発行されるようになります。
大抵のエレメントでは、「何もしない」という処理が、デフォルトの動作です。
これを無効化するので、逆にドロップ操作を受け入れるようになります。
エレメント上で、ドロップ操作を許可する
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行される関数
// ------------------------------------------------------------
function DragOverFunc(e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// デフォルトのドラッグを無効化（ドロップ操作を許可）
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトのドラッグを無効化する
e.preventDefault();
}else{
// デフォルトのドラッグを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.addEventListener("dragover",DragOverFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.attachEvent("ondragover",DragOverFunc);
// イベントハンドラを使用する
}else{
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.ondragover = DragOverFunc;
}
//-->
</script>
</body>
</html>
３．任意のエレメント上で、ドロップが発生したか調べる
ドロップが発生したか調べるには、ondrop イベントを使用します。
ドロップが発生したか調べる
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行される関数
// ------------------------------------------------------------
function DragOverFunc(e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// デフォルトのドラッグを無効化（ドロップ操作を許可）
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトのドラッグを無効化する
e.preventDefault();
}else{
// デフォルトのドラッグを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// ドロップした時に実行される関数
// ------------------------------------------------------------
function DropFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドロップした");
// ------------------------------------------------------------
// デフォルトのドロップを無効化
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトのドロップを無効化する
e.preventDefault();
}else{
// デフォルトのドロップを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.addEventListener("dragover",DragOverFunc);
// ドロップしたときに実行されるイベント
element.addEventListener("drop",DropFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.attachEvent("ondragover",DragOverFunc);
// ドロップしたときに実行されるイベント
element.attachEvent("ondrop",DropFunc);
// イベントハンドラを使用する
}else{
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.ondragover = DragOverFunc;
// ドロップしたときに実行されるイベント
element.ondrop = DropFunc;
}
//-->
</script>
</body>
</html>
４．任意のデータを取得する
登録したコールバック関数の引数から、DragEvent オブジェクトが得られます。
DragEvent オブジェクトの dataTransfer プロパティから、DataTransfer オブジェクトが得られます。
DataTransfer オブジェクトから、任意のデータを取り出す方法については、こちらで解説しています。
ドロップされたデータを出力する
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行される関数
// ------------------------------------------------------------
function DragOverFunc(e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// デフォルトのドラッグを無効化（ドロップ操作を許可）
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトのドラッグを無効化する
e.preventDefault();
}else{
// デフォルトのドラッグを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// ドロップした時に実行される関数
// ------------------------------------------------------------
function DropFunc(e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
// ------------------------------------------------------------
// テキストを取得する
// ------------------------------------------------------------
var str = data_transfer.getData("text");
console.log("text:" + str);
// ------------------------------------------------------------
// データを順番に取り出す（HTML5 世代）
// ------------------------------------------------------------
var types = data_transfer.types;
if(types){
var num = types.length;
console.log("タイプ総数:" + num);
var i;
for(i=0;i < num;i++){
var type = types[i];
var data = data_transfer.getData(type);
console.log("--- No." + i + " ---");
console.log("type:" + type);
console.log("data:" + data);
}
}
// ------------------------------------------------------------
// ファイルを取得する（HTML5 世代）
// ------------------------------------------------------------
var file_list = data_transfer.files;
if(file_list){
var num = file_list.length;
console.log("ファイル総数:" + num);
var i;
for(i=0;i < num;i++){
var file = file_list[i];
console.log("--- No." + i + " ---");
console.log("ファイル名:" + file.name);
console.log("ファイルサイズ:" + file.size);
console.log("ファイルの種類:" + file.type);
}
}
// ------------------------------------------------------------
// デフォルトのドロップを無効化
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトのドロップを無効化する
e.preventDefault();
}else{
// デフォルトのドロップを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.addEventListener("dragover",DragOverFunc);
// ドロップしたときに実行されるイベント
element.addEventListener("drop",DropFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.attachEvent("ondragover",DragOverFunc);
// ドロップしたときに実行されるイベント
element.attachEvent("ondrop",DropFunc);
// イベントハンドラを使用する
}else{
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.ondragover = DragOverFunc;
// ドロップしたときに実行されるイベント
element.ondrop = DropFunc;
}
//-->
</script>
</body>
</html>
ドロップ側のイベント一覧
ドロップ側のイベントは、以下の種類があります。
| イベント名 | 型 | 解説 |
| ondragenter | DragEvent | ドラッグ中に、マウスカーソルがエレメント内に侵入すると実行されるイベント |
| ondragover | DragEvent | ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント |
| ondragleave | DragEvent | ドラッグ中に、マウスカーソルがエレメント外に撤退すると実行されるイベント |
| ondrop | DragEvent | ドロップしたときに実行されるイベント |
ドロップ側のイベント
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ中に、マウスカーソルがエレメント内に侵入すると実行される関数
// ------------------------------------------------------------
function DragEnterFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドラッグ中に、マウスカーソルがエレメント内に侵入した");
}
// ------------------------------------------------------------
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行される関数
// ------------------------------------------------------------
function DragOverFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドラッグ中に、マウスカーソルがエレメント上を移動した");
// ------------------------------------------------------------
// デフォルトのドラッグを無効化（ドロップ操作を許可）
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトのドラッグを無効化する
e.preventDefault();
}else{
// デフォルトのドラッグを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// ドラッグ中に、マウスカーソルがエレメント外に撤退すると実行される関数
// ------------------------------------------------------------
function DragLeaveFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドラッグ中に、マウスカーソルがエレメント外に撤退した");
}
// ------------------------------------------------------------
// ドロップした時に実行される関数
// ------------------------------------------------------------
function DropFunc(e){
if(!e) e = window.event; // レガシー
console.log("ドロップした");
// ------------------------------------------------------------
// デフォルトのドロップを無効化
// ------------------------------------------------------------
if(e.preventDefault){
// デフォルトのドロップを無効化する
e.preventDefault();
}else{
// デフォルトのドロップを無効化する（非標準）
return false;
}
}
// ------------------------------------------------------------
// リッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(element.addEventListener){
// ドラッグ中に、マウスカーソルがエレメント内に侵入すると実行されるイベント
element.addEventListener("dragenter",DragEnterFunc);
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.addEventListener("dragover",DragOverFunc);
// ドラッグ中に、マウスカーソルがエレメント外に撤退すると実行されるイベント
element.addEventListener("dragleave",DragLeaveFunc);
// ドロップしたときに実行されるイベント
element.addEventListener("drop",DropFunc);
// アタッチイベントに対応している
}else if(element.attachEvent){
// ドラッグ中に、マウスカーソルがエレメント内に侵入すると実行されるイベント
element.attachEvent("ondragenter",DragEnterFunc);
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.attachEvent("ondragover",DragOverFunc);
// ドラッグ中に、マウスカーソルがエレメント外に撤退すると実行されるイベント
element.attachEvent("ondragleave",DragLeaveFunc);
// ドロップしたときに実行されるイベント
element.attachEvent("ondrop",DropFunc);
// イベントハンドラを使用する
}else{
// ドラッグ中に、マウスカーソルがエレメント内に侵入すると実行されるイベント
element.ondragenter = DragEnterFunc;
// ドラッグ中に、マウスカーソルがエレメント上を移動すると実行されるイベント
element.ondragover = DragOverFunc;
// ドラッグ中に、マウスカーソルがエレメント外に撤退すると実行されるイベント
element.ondragleave = DragLeaveFunc;
// ドロップしたときに実行されるイベント
element.ondrop = DropFunc;
}
//-->
</script>
</body>
</html>
ドロップ側のエフェクトを設定する
ドロップ側のエフェクトを設定する方法は、こちらで解説しています。