HTML5 で DRAG & DROP を使う

HTML5 で DRAG & DROP を使う

HTML５でDRAG & DROP（ドラッグアンドドロップ）を使ってみます。古本で買った参考書によると、HTML５が世の中に出るまえから既にDRAG & DROPは頻繁に使われていた様です。但し、HTML５では、DRAG & DROPに特化したイベントやAPIを標準仕様として追加しているとのことです。つまり、使いかってが良くなったものと期待して、実際に確認してみました。
確認したDRAG & DROPのサンプルプログラム画面とプログラムを載せています。サンプルプログラムは、ブラウザー上にBOX-AとBOX-Bがあり、２つのBOX間で野菜をDRAG & DROPを使って移動するというものです。
（→サンプルプログラムへのリンク）

マウスでは動きますが、後日アンドロイドスマホ，Windowsタブレットタッチ操作では動かないことを確認しました。残念。

①DRAG & DROP サンプルプログラム画面

②サンプルプログラム

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset=utf-8>
<title>DRAG & DROP TEST</title>

<style>

body {line-height: 100%;}

#BOX-A {
  width:500px; height:150px; margin:2px; background-color:#FFFF00; border:1px solid #000000;
}

#BOX-B {
  width:500px; height:150px; margin:2px; background-color:#00FFFF; border:1px solid #000000;
}
</style>

<script>
//◆◆◆ ドラッグ開始時処理 ◆◆◆
function drag_start(event){
  event.dataTransfer.setData("text", event.target.id);	//DRAG対象要素 id名設定
}

//◆◆◆ 対象要素がドロップ領域上処理 ◆◆◆
function drag_over(event){
  event.preventDefault();				//dragoverEVENTｷｬﾝｾﾙ→DROP先要素が受付可能
}

//◆◆◆ ドロップ時処理 ◆◆◆
function drop_end(event){
  var id_name = event.dataTransfer.getData("text");	//ドラッグデータid名取得
  var drag_elm =document.getElementById(id_name);	//id名でドラッグ要素取得
  event.currentTarget.appendChild(drag_elm);		//要素追加
  event.preventDefault();				//dropイベントキャンセル
}
</script>

</head>


<body>

<H2>野菜を入れ替えてみて下さい。</H2>
<p>  BOX-A</p>
<div id="BOX-A" ondragover="drag_over(event)" ondrop="drop_end(event)">
<img src="images/001.png" id="001" alt="001" draggable="true" ondragstart="drag_start(event)">
<img src="images/002.png" id="002" alt="002" draggable="true" ondragstart="drag_start(event)">
<img src="images/003.png" id="003" alt="003" draggable="true" ondragstart="drag_start(event)">
</div>

<BR>
<p>  BOX-B</p>
<div id="BOX-B" ondragover="drag_over(event)" ondrop="drop_end(event)">
</div>

</body>
</html>

プログラム内容を簡単に整理しておきます。DRAG & DROP（ドラッグアンドドロップ）の過程でいくつかのイベントが発生します。プログラム内では、各要素でイベント属性を設定することで、下表イベントを検知し、対応関数を実行します。

イベント	説明
dragstart	対象となる要素をドラッグした時に発生。今回のプログラムでは行番48，49，50 で各〈img〉要素で、draggable=”true”（ドラッグ可能）設定し、ドラッグ可能要素としています。イベント発生時は「ondragstart=“drag_start(event)”」イベント属性設定により、”drag_start(event)”関数を実行します。
dragover	ドラッグ対象要素がドロップ対象要素上にある時、連続的に発生します。行番47～51，行番55～56の各〈DIV〉要素で「ondragover=”drag_over(event)”」をイベント属性設定し、イベント発生時、”drag_over(event)”関数を実行します。
drop	ドラッグ対象要素がドロップ対象要素にドロップされた時発生します。行番47～51，行番55～56の各〈DIV〉要素で「 ondrop=”drop_end(event)”」イベント属性設定し、イベント発生時に、”drop_end(event)”関数を実行します。

【参考】w3schools.com HTML Event Attributes

処理の流れは、まず野菜の図を DRAG（ドラッグ）すると、行番22～24の”drag_start(event)”関数を実行します。ここではDataTransferオブジェクトに対象要素のIDを設定します。
次に対象要素が移動(DROP)先の上にくると、”dragover”イベントが発生しますので、行番27～29の関数を実行し、”dragover”イベントをキャンセルします。ここで、キャンセルしないと肝心の“drop” イベントが発生しない様です。
最後に移動(DROP)先で対象要素をDROP（ドロップ）すると、“drop” イベントが発生し行番32～37の関数を実行します。行番33ではDRAG時にセットした対象要素IDを取得します。次に行番34でID番号から要素を取得し、行番35で移動(DROP)先に要素を追加（移動）します。
以上の処理でBOX間の野菜移動が出来るようになります。

まとめ

DRAG & DROP（ドラッグアンドドロップ）自体は思ったより簡単に出来ました。ただ、同じBOX内で順番の並べ替えをしたかったのですが、今回のやり方では常にBOXの一番最後に追加される様になります。少し調べてみましたが、ヒントとなる資料等に巡り合うことが出来ませんでした。
一方、ネットでは DRAG & DROP を使った要素の並び替えについて “jQueryUI” を使った方法が上位に検索されますので、きっぱりと割り切って、次回は “jQueryUI” を使った方法を検討してみることにします。