ウェブページの指定した領域にドラッグ＆ドロップされたハイパーリンクの遷移先のURLを取得する - JavaScript

ウェブページの指定した領域にドラッグ＆ドロップされたハイパーリンクの遷移先のURLを取得するJavaScriptコードを紹介します。

概要

こちらの記事とこちらの記事では要素のドラッグ&ドロップ、こちらの記事ではエクスプローラからのファイルのドロップのコードを紹介しました。
この記事では、Webブラウザの別ウィンドウからハイパーリンクをドロップされる領域の作成とドロップされたリンクのリンク先のURLを取得するJavaScriptコードを紹介します。

プログラム例

コード

下記のコードを記述します。

DropHyperLink.css

.dropArea {
    margin-top:8px;
    margin-bottom:8px;
    width:320px;
    height:64px;
    background-color:#fff2a7;
    border: 1px solid #ff6a00;
}

.longTextBox{
    width:80%;
}

DropHyperLink.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="DropHyperLink.css" />
  <script type="text/javascript">
    function load() {
      var droparea = document.getElementById('LinkDropArea');
      droparea.addEventListener('dragover', onDragOver, false);
      droparea.addEventListener('drop', onDrop, false);

    }

    function onDragOver(event) {
      //event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.dropEffect = 'link';
    }
    
    function onDrop(event) {
      var url = event.dataTransfer.getData("text");
      var textBox = document.getElementById('OutputTextBox');
      textBox.value = url;
    }

  </script>
</head>
<body onload="load();">
  <div id="LinkDropArea" class="dropArea">ここにリンクをドロップ</div>
  <input id="OutputTextBox" class="longTextBox" type="text"/>
</body>
</html>

解説

ID=LinkDropArea のdiv枠にウェブブラウザのリンクをドロップできるようにします。ドロップを受け取るには、枠の要素に対して、dragover イベントハンドラを実装します。イベントハンドラでpreventDefault()を呼び出しデフォルトのドラッグを受け取らない動作をブロックします。また、dataTransfer.dropEffect に設定します。
また、drop イベントハンドラーでは、dataTransfer.getData("text") メソッドを呼び出し、ドロップされた要素のテキストデータを取得します。リンクの場合にはドロップされた要素のテキストデータにリンク先のURLが格納されています。取得したURLの文字列は画面下部のテキストボックスに表示します。