JavaScript プログラミング講座

 

ドラッグアンドドロップについて

 


■ドラッグアンドドロップについて


ブラウザ と 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>
 

■デフォルトのドラッグを無効化する

 
■イベントリスナーの場合
 
登録したコールバック関数の引数から、DragEvent オブジェクトが得られます。
 
DragEvent オブジェクトから、preventDefault() メソッドを呼び出します。
 
イベントリスナーを使って、デフォルトのドラッグを無効化する

<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>
 
■イベントハンドラの場合
 
イベントハンドラ利用時も、イベントリスナーと同様です。
 
 
イベントハンドラを使って、デフォルトのドラッグを無効化する

<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>
 

■デフォルトのドロップを無効化する

 
■イベントリスナーの場合
 
登録したコールバック関数の引数から、DragEvent オブジェクトが得られます。
 
DragEvent オブジェクトから、preventDefault() メソッドを呼び出します。
 
イベントリスナーを使って、デフォルトのドロップを無効化する

<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>
 
■イベントハンドラの場合
 
イベントハンドラ利用時も、イベントリスナーと同様です。
 
 
イベントハンドラを使って、デフォルトのドロップを無効化する

<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>
 
 

 

データのドラッグを開始する

 
 
 


データのドラッグを開始する

 
1.任意のエレメントのドラッグ操作を有効にする
 
任意のエレメントの、ドラッグ操作を有効にするには、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);
 
2.draggable 属性が無効の場合
 
InternetExplorer 9 以前の場合は、draggable 属性に対応していません。
 
任意のエレメントの上で、ドラッグ操作をしてもドラッグイベントは発生しません。
 
ただしユーザーが、あらかじめエレメントを選択状態にしていれば、ドラッグイベントは発生します。
 
<IMG><A> 要素を利用すると、選択状態に関係なくドラッグイベントを発生させる事ができます。
 
3.任意のエレメントから、ドラッグを開始したか調べる
 
ドラッグを開始したか調べるには、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>
 
4.任意のデータを格納する
 
登録したコールバック関数の引数から、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世代)

 
ドラッグを開始すると、ドラッグ発生地点のエレメントが、マウスカーソルに追従するように描画されます。
 
ドラッグ中に描画されるエレメントを変更する方法は、こちらで解説しています。
 
 

 

ドロップでデータを受け取る

 
 
 


ドロップでデータを受け取る

 
1.任意のエレメント上で、ドラッグしながらマウスカーソルを移動したか調べる
 
ドラッグしながらマウスカーソルを移動したか調べるには、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>
 
2.任意のエレメント上で、ドロップ操作を許可する
 
ドロップ操作を許可するには、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>
 
3.任意のエレメント上で、ドロップが発生したか調べる
 
ドロップが発生したか調べるには、ondrop イベントを使用します。
 
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>
 
4.任意のデータを取得する
 
登録したコールバック関数の引数から、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>
 

ドロップ側のエフェクトを設定する

 
ドロップ側のエフェクトを設定する方法は、こちらで解説しています。