https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/6-convenient-events-to-detect-drag-and-drop-in-javascript/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/6-convenient-events-to-detect-drag-and-drop-in-javascript/

JavaScriptでドラック&ドロップ検知するのに便利な6つのイベント

ドラッグ&ドロップに対して処理を追加する

JavaScriptでは、ドラッグ&ドロップに対して任意の処理を実装する仕組みが備わっています。

イベント(ドラッグしている要素で発生)

イベント名発生条件
dragstart要素のドラッグを開始
dragドラッグ中
dragendドラッグを終了
ドラック&ドロップ検知のイベント

イベント(ドラッグ要素を受け入れる要素で発生)

イベント名発生条件
dragenterドラッグ中でマウスポインターが要素上に乗った時
dragoverドラッグ中でマウスポインターが要素上に存在するとき
dragleaveドラッグ中でマウスポインターが要素上から離れた時
drop要素をドロップした時

プロパティ

プロパティ意味
event.dataTransfer.filesドロップされたファイルの情報オブジェクト(FileListオブジェクト)

サンプルコード

サンプルとして、要素をドラッグした時にログを出力し、かつその要素が「ドラッグ検知エリアに入った時から出る時まで」のログを出力するスクリプトを紹介します。

1点注意点ですが、dragイベントとdragoverイベントはドラッグ中ずっと発生し続けます。

当ページのサンプルコードでは文字出力は1度しか起こらないようにしていますが、本来なら1つのログが大量に出力される点は把握しておくと良いです。

Output
ドラッグ可能
ドラッグ検知枠
検知ログ
    Pug
    div#button.mb-4.d-block.text-center(draggable="true") ドラッグ可能
     div#rectangle.mt-3 ドラッグ検知枠
     div.mt-4 検知ログ
     ol#targetText
    SCSS
    #button {
    	--background-color: #fff;
      --color: #576574;
    	--transition: all .3s;
    	margin-bottom: 10px;
      background-color: var(--background-color);
      padding: 10px;
      color: var(--color);
    	border: 1px solid #576574;
      cursor: pointer;
      width: 120px;
    	transition:  var(--transition);
    	&:hover {
    		transition: var(--transition);
    		color: var(--background-color);
    		background-color: var(--color);
    	}
    }
    
    #rectangle {
    	width: 100%;
      height: 150px;
    	border: 2px solid #576574;
    	text-align: center;
    }
    JavaScript
    const targetButton = document.getElementById('button');
    const targetText = document.getElementById('targetText');
    let dragLogged = false;
    let dragAreaIn = false;
    
    targetButton.addEventListener('dragstart', () => {
    	if ( dragLogged ) {
    		dragLogged = false;
    	}
    	mouseCursorLog = document.createElement("li");
    	mouseCursorLog.textContent = '要素のドラッグ開始';
    	targetText.appendChild(mouseCursorLog);
    });
    targetButton.addEventListener('drag', () => {
    	if ( ! dragLogged ) {
    		mouseCursorLog = document.createElement("li");
    		mouseCursorLog.textContent = '要素のドラッグをしています。';
    		targetText.appendChild(mouseCursorLog);
    		dragLogged = true;
    	}
    });
    targetButton.addEventListener('dragend', () => {
      mouseCursorLog = document.createElement("li");
    	mouseCursorLog.textContent = '要素のドラッグ完了';
      targetText.appendChild(mouseCursorLog);
    });
    
    
    rectangle.addEventListener('dragenter', () => {
    	if ( dragAreaIn ) {
    		dragAreaIn = false;
    	}
    	mouseCursorLog = document.createElement("li");
    	mouseCursorLog.textContent = 'ドラッグ検知エリアに入りました';
    	targetText.appendChild(mouseCursorLog);
    });
    rectangle.addEventListener('dragover', () => {
    	if ( ! dragAreaIn ) {
    		mouseCursorLog = document.createElement("li");
    		mouseCursorLog.textContent = 'ドラッグ検知エリアに滞在中です。';
    		targetText.appendChild(mouseCursorLog);
    		dragAreaIn = true;
    	}
    });
    rectangle.addEventListener('dragleave', () => {
      mouseCursorLog = document.createElement("li");
    	mouseCursorLog.textContent = 'ドラッグ検知エリアから離脱しました。';
      targetText.appendChild(mouseCursorLog);
    });
    インストラクター
    コメント

    コメントを残す