JavaScript入門[HTML5編]テキストのDragDrop

テキストをDragDropするサンプルプログラム

このサンプルでは、２つのdivタグを作成し、 上のエリアの文字を下のエリアにドロップすると、文字がコピーされるようにしてみます。

<div class="dd" id="txt1" draggable="true">
ここのテキストをドラッグ・ドロップしてみます。
</div>
<div class="dd" id="txt2">
ドロップエリア
</div>

<style type="text/css">
div.dd{ width:100%; height:100px; font-size:150%; }
div#txt1{ background-color:#ffff80; }
div#txt2{ background-color:#80ffff; }
</style>

<script>

var erea1 = document.getElementById("txt1");
var erea2 = document.getElementById("txt2");

//ドラッグ開始時の処理
erea1.addEventListener("dragstart", function(evt) {

  //テキストをdataTransferにセットする
  evt.dataTransfer.setData( "text/plain" , evt.target.textContent );

  //イベントの予期せぬ伝播を防ぐための記述
  evt.stopPropagation();

}, false);

//ドロップされた時の処理
erea2.addEventListener("drop", function(evt) {

  //dataTransferからテキストデータを受け取る
  var droptxt = evt.dataTransfer.getData( "text/plain" );

  //ドロップエリアに受け取ったテキストを記述
  erea2.innerHTML = droptxt;

  //ブラウザのデフォルト動作の抑制
  evt.preventDefault();

}, false);

//２つのイベントでブラウザのデフォルトの動作を抑制する
erea2.addEventListener("dragover", function(evt) {
  evt.preventDefault();
}, false);

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

＜サンプル＞黄色のエリアのテキストを青色のエリアにドロップしてみてください。

スクリプトの説明

では上記のスクリプトを詳しく見ていきましょう。

２つのdivタグ

<div class="dd" id="txt1" draggable="true">
ここのテキストをドラッグ・ドロップしてみます。
</div>
<div class="dd" id="txt2">
ドロップエリア
</div>

まずは２つのdivタグを用意しました。 上のdivタグ内の文字を、下のdivタグ内にドロップします。 ドラッグを可能にするため、draggable属性を追加しています。

最初のdivタグにはid名「txt1」を付け、 2つ目は「txt2」を付けています。また両方のdivタグにクラス名「dd」も付けています。 両方のタグに共通のスタイルを設定するためです。

CSSでスタイル設定

<style type="text/css">
div.dd{ width:100%; height:100px; font-size:150%; }
div#txt1{ background-color:#ffff80; }
div#txt2{ background-color:#80ffff; }
</style>

次にCSSでdivタグにスタイル設定しています。 クラス名「dd」が付いたものに幅100%、高さ100px、文字サイズ150%を指定しています。 またid名「txt1」が付いているdivタグの背景色を薄い黄色に、 id名「txt2」の方は薄い青色に設定しました。 （詳しくはCSS解説サイトを見てください）。

id名の付いたdivタグの取得

var erea1 = document.getElementById("txt1");
var erea2 = document.getElementById("txt2");

2つのid名を付けたdivタグをgetElementById()で取得し、変数erea1,erea2に格納します。 これで記述が少し簡略化できます。

ドラッグ開始時の処理

erea1.addEventListener("dragstart", function(evt) {

}, false);

続いてスクリプトの内部を見ていきます。まずは最初のdivタグの方に、dragstartイベントをaddEventListener()で追加します。 関数の引数は「evt」としました。

evt.dataTransfer.setData( "text/plain" , evt.target.textContent );

イベント内の処理について今度は見てみます。 setData()を使い、dataTransferにドラッグしている文字データをセットします。 第一引数はテキストを指定するため「text/plain」にしました。

第2引数でドラッグしているテキストデータを指定しています。 target.textContentで取得できます。

evt.stopPropagation();

続いて、イベントが親要素に予期せぬ伝播をしてしまわないように、 stopPropagation()を使って伝播を抑制します。

ドロップされた時の処理

erea2.addEventListener("drop", function(evt) {

}, false);

今度は下のdivタグに、dropイベントを追加します。やはり関数の引数は「evt」にしています。

var droptxt = evt.dataTransfer.getData( "text/plain" );
erea2.innerHTML = droptxt;

イベントの内部で、getData()を使いdataTransferからデータを取り出します。 取り出すデータはテキスト形式なので「text/plain」を指定しています。 取り出したテキストを、変数droptxtに格納します。

次に、取り出したテキストをinnerHTMLを使って下のdivタグ内に書き出しています。

evt.preventDefault();

dropイベントの最後に、ブラウザのデフォルトの動作を停止するコードを記述しておきます。 preventDefault()を指定します。

２つのイベントでブラウザのデフォルトの動作を停止させる

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

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

最後にdragoverイベントとdragenterイベントで、ブラウザのデフォルトの動作を停止しておきます。 preventDefauto()を記述しておきます。