HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML】ドラッグした要素がドロップされたときにスクリプトを実行する方法

ondrop属性とは

HTMLのondrop属性は、ドラッグされた要素がドロップ先に置かれた瞬間に発火するイベントハンドラです。この属性を利用すると、ドロップ操作が完了したタイミングでJavaScriptなどのスクリプトを実行できます。

なお、ドロップを正しく処理するには、dragoverイベント側でevent.preventDefault()を呼び出し、ブラウザのデフォルト動作（リンクを開く・ファイルを開くなど）を無効化しておく必要がある点に注意しましょう。

ドラッグ＆ドロップに関連する主なイベント

  • dragstart：要素のドラッグが開始されたときに発生
  • drag：要素をドラッグしている間に発生
  • dragover：ドラッグ中の要素がドロップ可能な領域の上にあるときに発生
  • drop：要素がドロップされたときに発生

実装例

次のコードでは、左右2つのボックスの間で「Drag!」というテキストを自由にドラッグ＆ドロップできます。ドロップが完了すると、画面にメッセージが表示されます。

<!DOCTYPE HTML>
<html>
<head>
<style>
.drag {
   float  : left;
   width  : 100px;
   height : 35px;
   border : 2px dashed #876587;
   margin : 15px;
   padding: 10px;
}
</style>
</head>
<body>
<div class="drag" ondrop="drop(event)" ondragover="dropNow(event)">
   <p ondragstart="dragStart(event)" ondrag="draggingNow(event)" draggable="true" id="dragtarget">Drag!</p>
</div>
<div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>
<div id="box"></div>
<p>左のボックスを右へ、または右のボックスを左へドラッグしてください。</p>
<script>
function dragStart(event) {
   event.dataTransfer.setData("text/plain", event.target.id);
}
function draggingNow(event) {
   document.getElementById("box").innerHTML = "ドラッグ中です！";
}
function dropNow(event) {
   event.preventDefault();
}
function drop(event) {
   event.preventDefault();
   var data = event.dataTransfer.getData("text/plain");
   event.target.appendChild(document.getElementById(data));
   document.getElementById("box").innerHTML = "要素のドロップに成功しました！";
}
</script>
</body>
</html>

補足：本サンプルでは、現在の標準仕様に沿ってMIMEタイプの"text/plain"を指定しています。古いサンプルコードでは"Text"という記述が見られますが、これは非推奨となっているため、新しい開発では"text/plain"を使用することをおすすめします。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実