JavaScript入門[HTML5編]HTML要素のDragDrop

divタグをドラッグするサンプルスクリプト

以下のサンプルでは、２列のdivタグのうち、 上側にある赤の正方形を下の列にコピーしてみたいと思います。 正方形もdivタグで作成しています。

<div class="dd" id="dragarea">
<div id="square" draggable="true"></div> 
</div>
<div class="dd" id="droparea"></div>

<style type="text/css">
div.dd{ width:100%; height:100px }
div#dragarea{ background-color:#80ffff }
div#droparea{ background-color:#ffff80 }
div#square{ background-color:red; width:80px; height:80px }
</style>

<script>
var area1 = document.getElementById("square");
var area2 = document.getElementById("droparea");

//ドラッグ開始時の処理
area1.addEventListener("dragstart", function(evt){
  evt.dataTransfer.setData( "text/html" , evt.target.outerHTML );
  evt.stopPropagation();
},false);

//ドロップ時の処理
area2.addEventListener("drop", function(evt){
 var drophtml = evt.dataTransfer.getData("text/html");
 area2.innerHTML = drophtml;
  evt.preventDefault();
},false);

//２つのイベントでデフォルトの動作を停止する
area2.addEventListener("dragenter", function(evt){
  evt.preventDefault();
},false);

area2.addEventListener("dragover", function(evt){
  evt.preventDefault();
},false);
</script>

＜サンプル＞赤の四角を下のエリアにドラッグしてみてください。

スクリプトの解説

HTML部分

<div class="dd" id="dragarea">
<div id="square" draggable="true"></div>
</div>
<div class="dd" id="droparea"></div>

最初にHTMLタグの部分を見てみます。divタグが３つ出てきます。 １つは上の列を構成するid名「dragarea」を付けたdivタグです。 またクラス名「dd」も付け、後から幅と高さをCSSで指定します。

id名「dragarea」が付いたdivタグの中に、 小さな正方形を表示するためのdivタグ（id名「square」）を記述します。 このdivタグをドラッグするのでdraggable属性を記入します。

３つ目は下の列、ドロップされる列を構成するdivタグです。 id名「droparea」を付けました。こちらもクラス名「dd」を付けています。

CSS部分

<style type="text/css">
div.dd{ width:100%; height:100px }
div#dragarea{ background-color:#80ffff }
div#droparea{ background-color:#ffff80 }
div#square{ background-color:red; width:80px; height:80px }
</style>

次はスタイルシートに関連した部分です。 クラス名「dd」が付いたdivタグの幅を100％，高さを100pxに指定しています。

次いでid名「dragarea」が付いたdivタグの背景色を薄い青色に、 id名「droparea」が付いたdivタグの背景色を薄い黄色に指定しました。

最後にid名「square」が付いたdivタグの背景色を赤に、幅と高さを80pxに指定しました。

ドラッグ・ドロップ要素の取得

var area1 = document.getElementById("square");
var area2 = document.getElementById("droparea");

次はスクリプトの中身を見ていきます。 最初にid名「square」が付いたdivタグをgetElementById()で取得し、変数area1に格納します。 同じくid名「droparea」が付いたdivタグを取得し、変数area2に格納しました。

dragstartイベント

area1.addEventListener("dragstart", function(evt){
  evt.dataTransfer.setData( "text/html" , evt.target.outerHTML );
  evt.stopPropagation();
},false);

今度はdragstartイベントについてです。addEventListener()でdaragstartイベントリスナを追加します。 関数の引数は今回も「evt」にしています。

イベントの処理の最初に、setData()でdataTransferにデータをセットします。 その第一引数ですが、今回はHTML要素が対象なので「text/html」としました。 また第二引数ではtarget.outerHTMLを記述して、ドラッグしているdivタグを指定しました。

最後のstopPropagation()は、イベントの予期せぬ伝播を防ぐために記述しています。

dropイベント

area2.addEventListener("drop", function(evt){
 var drophtml = evt.dataTransfer.getData("text/html");
 area2.innerHTML = drophtml;
  evt.preventDefault();
},false);

次にドロップされる側のイベント処理について見ていきます。 addEventListener()でdropイベントリスナを追加します。

イベントの処理部分では、getData()でdataTransferからデータを取得し、変数drophtmlに格納します。 getDataのカッコ内は、dragstartイベントの時と同じ「text/html」にしています。

取得したHTMLタグをinnerHTMLで書き出します。

preventDefault()はブラウザのデフォルトの処理を抑制します。

dragenterイベントとdragoverイベント

area2.addEventListener("dragenter", function(evt){
  evt.preventDefault();
},false);

area2.addEventListener("dragover", function(evt){
  evt.preventDefault();
},false);

最後にdragenterイベントとdragoverイベントで、 ブラウザのデフォルト動作を抑制するスクリプトを記述しておきます。 preventDefault()を指定します。