HTMLで要素がドラッグされているときにスクリプトを実行する方法
ondragover属性とは
HTMLのondragover属性を使用すると、ドラッグ中の要素やテキストが有効なドロップ先の上にある間に、スクリプトを実行できます。ドラッグ＆ドロップ操作の途中段階で何らかの処理を行いたい場合に便利なイベント属性です。
注意点として、ondragoverイベントはデフォルトではドロップ操作を許可しないため、ハンドラ内でevent.preventDefault()を呼び出してデフォルトの動作をキャンセルする必要があります。これを忘れると、ドロップが正しく機能しません。
サンプルコード
以下のコードを実行して、ondragover属性の実装を確認してみましょう。左側のボックスを右へ、あるいは右側のボックスを左へドラッグすると、各イベントが発火します。
<!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>Drag the left box to the right or drag the right box to the left.</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function draggingNow(event) {
document.getElementById("box").innerHTML = "Dragged successfully!";
}
function dropNow(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("box").innerHTML = "The element dropped successfully!";
}
</script>
</body>
</html>コードのポイント
- dragStart(): ドラッグ開始時にdataTransferオブジェクトへ、対象要素のIDをデータとしてセットします。
- draggingNow(): 要素がドラッグされている間に、ステータスメッセージを表示します。
- dropNow():
event.preventDefault()でデフォルト動作を無効化し、ドロップを可能にします。 - drop(): ドロップされた要素を受け入れて移動させ、完了メッセージを表示します。
このように、ondragoverとondropを組み合わせることで、HTMLだけで直感的なドラッグ＆ドロップUIを簡単に実装できます。
-
HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）
HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実
-
HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法
HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実