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

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

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

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をdropArear2に追加
        dropArea2.appendChild(target);
}, false);

サンプルではドロップ可能エリアをidで分けて記述していますが、実装時はclassの方が便利かと思います

DataTransferの利用

サンプルでは使用していませんが「DataTransfer」でドラッグ&ドロップ間のデータ保持も可能です

jQuery

「jQuery」と「jQuery UI」を利用しているなら「Draggable()」「droppable()」や並び替えだけなら「sortable()」という便利なものもあります

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

Posted by Yousuke.U