【JavaScript】ドラッグ＆ドロップをトリガーにしたイベント

2018年3月9日2019年6月12日JavaScript,イベント

ドラッグ＆ドロップをトリガーにしたJavaScriptイベントの実装サンプルです

1. drag&drop系イベント一覧（JavaScript）
2. 動作サンプル（JavaScript）
3. サンプルコード（JavaScript）
- 3.1. DataTransferの利用
- 3.2. jQuery

drag&drop系イベント一覧（JavaScript）

ドラッグ&ドロップする要素に適用するイベント名

dragstart	ドラッグが開始された時
drag	ドラッグ中（連続性あり）
dragend	ドラッグを解除した時

ドロップ可能なエリア要素に適用するイベント名

dragenter	ドロップ可能領域に入った時
dragover	ドロップ可能領域入っている時（連続性あり）
dragleave	ドロップ可能領域から離れた時
drop	ドロップ可能領域でを解除した時

動作サンプル（JavaScript）

サンプルではドラッグ＆ドロップを実装するのに最低限必要なものを記述しています

See the Pen JavaScript Drag Drop ivent by yochans (@yochans) on CodePen.

サンプルコード（JavaScript）

HTML

<div id="dropArea1"><div id="target" draggable="true">DRAG<br />DROP</div></div>
<div id="dropArea2"></div>

CSS

#target{
  width:100px;
  height:100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #01579B;
  color:#FFF;
  border:solid 1px #000;
}

#dropArea1{
  width:100px;
  height:100px;
  margin:10px 0;
  border:dotted 1px #000;
}

#dropArea2{
  width:100px;
  height:100px;
  margin:10px 0;
  border:dotted 1px #000;
}

JavaScript

//ドラッグできる要素
const target = document.getElementById('target');
//ドロップ可能エリア
const dropArea1 = document.getElementById('dropArea1');
const dropArea2 = document.getElementById('dropArea2');

//ドラッグが開始された時
target.addEventListener('dragstart', () => {
        //このサンプルでは未使用
}, false);

//ドラッグ中の時
target.addEventListener('drag', () => {
        //targetを非表示にする
        target.style.display = `none`;
}, false);

//ドラッグが終了した時
target.addEventListener('dragend', () => {
        //targetを表示にする
        target.style.display = `flex`; 
}, false);


//ドロップ可能エリアに入った時
dropArea1.addEventListener('dragenter', () => {
        //dropAreaに背景色を付けてわかりやすくする
        dropArea1.style.background = "#E0E0E0";
}, false);

dropArea2.addEventListener('dragenter', () => {
        //dropAreaに背景色を付けてわかりやすくする
        dropArea2.style.background = "#E0E0E0";
}, false);


//ドロップ可能エリアから離れた時
dropArea1.addEventListener('dragleave', (event) => {
        //dropAreaの背景色を戻す
        dropArea1.style.background = "none";
}, false);

dropArea2.addEventListener('dragleave', (event) => {
        //dropAreaの背景色を戻す
        dropArea2.style.background = "none";
}, false);


//ドロップ可能エリア上にある時
dropArea1.addEventListener('dragover', (event) => {
        //drop処理に必要
        event.preventDefault();
}, false);
dropArea2.addEventListener('dragover', (event) => {
        //drop処理に必要
        event.preventDefault();
}, false);



//ドロップ可能エリアでドロップされた時
dropArea1.addEventListener('drop', () => {
        //targetのHTMLをdropArear1に追加
        dropArea1.appendChild(target);
}, false);

dropArea2.addEventListener('drop', () => {
        //targetのHTMLをdropArear２に追加
        dropArea2.appendChild(target);
}, false);