他ページからドラッグしたリンクテキストを取得してURLを取得する部分でハマってしまった部分を備忘録として投稿します。
リンクテキストを取得するページ
実際に次のようなページを新しく作成しました。［画面にリンクをドロップ］部分に他ページからリンクテキストをドラッグすると、指定したJsファイルが動作することになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="dropurl.css" type="text/css">
<title>Get Drop Link Url</title>
</head>
<body>
<div id="_dropZone" class="dropZone">画面にリンクをドロップ
<p id="_dropLinkUrl"></p>
</div>
<script src="dropurl.js"></script>
</body>
</html>HTMLで指定した、.js ファイルには次のようなコードを追加します。
‘drop’ イベントには、ドロップされたリンクテキストからURLを取得して、指定された場所に追加します。
‘dragover’ イベントは必要なさそうですが、リンクテキストをドロップした際にブラウザーが遷移することを防止する ‘preventDefault‘ を実装するために必要です。
document.getElementById('_dropZone').addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'link';
}, false);
document.getElementById('_dropZone').addEventListener('drop', function(e) {
e.preventDefault();
var url = e.dataTransfer.getData("text/plain");
var dropLinkUrl = document.getElementById('_dropLinkUrl');
dropLinkUrl.innerText = url;
}, false);
‘dragover’ イベントを実装しないと、Chromeブラウザーの場合はリンクテキストをドロップした際に別タブでリンク先が表示されてしまい、本来期待したJavaScriptが動作しません。
最後にCSSファイルを作成して要素のサイズを調整します。
html {
height: 100%;
}
body {
height: 100%;
color:white;
background-color:black;
}
.dropZone {
width:100%;
height: 100%;
background-color:black
}出来上がったページを実行
作成したページをChromeブラウザーで表示して実行してみます。
他タブや別ウィンドウに表示させたウェブページ内のリンクをマウスでドラッグして、ページ内の［画面にリンクをドロップ］にドロップします。
ドロップしたリンクテキスト内のURLが画面に追加されます。
URLの他にもリンクテキストにはテキストや、HTMLが取得できるのでハイパーリンクをページ上に再現できたりします。
まとめ
今回は短い記事ですが、JavaScript で、他ページからドロップされたリンクテキストからURLを取得してページ内に追加する手順を紹介しました。
ページ内にドロップされたイベントの他にも、ブラウザーのページ遷移を防止するためにドラッグ中のイベントも追加する必要があります。
他ページからドロップされたタイミングで、リンクテキストを取得したい方の参考になれば幸いです。
スポンサーリンク
最後までご覧いただき、ありがとうございます。
