JavaScript入門[HTML5編]ドロップ領域を目立たせる

ドロップ領域を目立たせるサンプルスクリプト

ドロップ先を目立たせるには、 dragenterイベントでスタイルを変更してやります。 その後、dropイベントでスタイルを戻します。 またドラッグ要素がドロップエリアから外れた時のために、 dragleaveイベントでもスタイルを戻す処置を入れておきます。

以下のサンプルでは、下列の4分の1のエリアだけドロップできるようにしています。 上列の赤正方形がそのエリアに入った場合に、背景色をピンクに変えるようにしています。

＜サンプル＞

このサンプルのスクリプトは以下の通りです。

<div id="dragarea">
 <div id="square" draggable="true"></div>
</div>
<div class="dp"></div>
<div class="dp" id="dparea"></div>
<div class="dp"></div>
<div class="dp" id="dend"></div>
<br class="clr">

<style type="text/css">
div#dragarea{ width:100%; height:100px; background-color:#80ffff }
div#square{ width:100px; height:100px; background-color:red }
div.dp{ width:25%; height:100px; float:left; background-color:#ffff80 }
br.clr{clear:left}
</style>

<script>

var obj1 = document.getElementById("square");
var obj2 = document.getElementById("dparea");

//ドロップ領域のスタイルを変更する関数
function efect(flg){
  if(flg)
  {
    obj2.style.backgroundColor = "#ff80ff";    
  }
  else
  {
    obj2.style.backgroundColor = "#ffff80";    
  }
}

obj1.addEventListener("dragstart", function(evt){
  evt.dataTransfer.setData("text/plain",evt.target.id);
  evt.stopPropagation();
},false);

obj2.addEventListener("drop", function(evt){
  var id=evt.dataTransfer.getData("text/plain");
  var obj3 = document.getElementById(id);
  if ( obj3 ){ obj2.appendChild( obj3 ) }
  evt.preventDefault();
  efect(false);  //ドロップ領域のスタイルを戻す
},false);

obj2.addEventListener( "dragenter" , function(evt){
  evt.preventDefault();
  efect(true);  //ドロップ領域のスタイルを変える
}, false );

//dragleaveイベントでドロップ領域のスタイルを戻す
obj2.addEventListener( "dragleave" , function(evt){
  efect(false);
}, false );

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

スクリプトの解説

HTML部分

<div id="dragarea">
 <div id="square" draggable="true"></div>
</div>
<div class="dp"></div>
<div class="dp" id="dparea"></div>
<div class="dp"></div>
<div class="dp"></div>
<br class="clr">

id名「dragarea」の付いたdivタグの中に、id名「square」のdivタグを配置しています。 この内部のdivタグにドラッグ可能にするdraggable属性を付けています。

また下段を４つのエリアに分けるため、４つのdivタグを配置しました。 ４つ全てにクラス名「dp」を付けて、同じスタイルを指定できるようにしてあります。

下段４つのdivタグのうち、2番目だけid名「dparea」を付けました。 ここにだけドロップできるようにします。

最後のbrタグは、回り込みを解除するためのスタイルを指定するために記述しています。

CSS部分

<style type="text/css">
div#dragarea{ width:100%; height:100px; background-color:#80ffff }
div#square{ width:100px; height:100px; background-color:red }
div.dp{ width:25%; height:100px; float:left; background-color:#ffff80 }
br.clr{clear:left}
</style>

スタイル指定の解説を簡単にしておきます。 1行目はid名「dragarea」のついたdivタグに、横幅100％、高さ100px、背景色薄青の指定しています。

2行目はid名「square」の付いたdivタグの縦横幅を100px、背景色を赤に指定しています。

3行目はクラス名「dp」の付いたdivタグの横幅を25％、高さを100px、左寄せして右に回り込ませ、背景色を薄い黄色にしています。

4行目はクラス名「clr」の付いたbrタグに、回り込み解除のスタイルを指定しています。

DOM要素の取得

var obj1 = document.getElementById("square");
var obj2 = document.getElementById("dparea");

次はscript内部を見ていきます。最初にDOM要素を取得して変数に格納しています。 変数obj1にはドラッグ要素を、変数obj2にはドロップ先の要素を取得しています。

スタイル変更関数efect

function efect(flg){
  if(flg)
  {
    obj2.style.backgroundColor = "#ff80ff";    
  }
  else
  {
    obj2.style.backgroundColor = "#ffff80";    
  }
}

次は、ドラッグ中にドロップエリアのスタイルを変更する関数efectを見ていきます。 引数flgは、boolean型にして、スタイルを変えるか変えないかを選択するようにしました。

if文でflgをチェックします。flgがtrueの場合、つまりドロップエリアのスタイルを変更する場合は、 背景色をピンク色にしています。falseの場合は薄い黄色を指定しています。 元が薄い黄色なので、元に戻ったように見えます。

dragstartイベント

obj1.addEventListener("dragstart", function(evt){
  evt.dataTransfer.setData("text/plain",evt.target.id);
  evt.stopPropagation();
},false);

dragstartイベントは、これまでと全然変更はありません。 ドラッグ要素のid名をdataTransferに渡し、イベントの予期せぬ伝播を抑制しています。

dropイベント

obj2.addEventListener("drop", function(evt){
  var id=evt.dataTransfer.getData("text/plain");
  var obj3 = document.getElementById(id);
  if ( obj3 ){ obj2.appendChild( obj3 ) }
  evt.preventDefault();
  efect(false);
},false);

dropイベントも1行を除いてほぼ変更はありません。 dataTransferからドラッグ要素のid名を受け取り、appendChild()で移動させます。 またブラウザのデフォルト動作を抑制します。

次がポイントです。dropが終わったならドロップエリアのスタイルを元に戻す処理を入れます。 関数efectの引数にfalseを指定して、スタイルを元に戻します。

dragenterイベント

obj2.addEventListener( "dragenter" , function(evt){
  evt.preventDefault();
  efect(true);
}, false );

dragenterイベントは、ドラッグ要素が入ってきた時に発動します。 ここにドロップエリアのスタイルを変更するスクリプトを記述します。 関数efectの引数にtrueを指定します。

dragleaveイベント

obj2.addEventListener( "dragleave" , function(evt){
  efect(false);
}, false );

dragleaveイベントは、ドラッグ要素が外れた時に発動します。 このタイミングでドロップエリアのスタイルを元に戻すようにします。 efect(false)を記述します。

dragoverイベント

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

dragoverイベントは、いつものようにブラウザのデフォルト動作を抑制するスクリプトを記述しておきます。