JavaScriptで要素がドラッグされている間に発生するイベントとは？ondragイベントの使い方を解説
JavaScriptで要素をドラッグする際に使用するのが ondrag イベントです。このイベントは、要素が実際にドラッグされている間に繰り返し発生します。
ドラッグ＆ドロップ関連の主なイベント
HTML5のドラッグ＆ドロップAPIには、ondrag以外にも以下のようなイベントがあります。用途に応じて使い分けることで、より柔軟な操作を実現できます。
- dragstart：ドラッグ操作が開始された瞬間に発生
- drag：要素がドラッグされている間、継続的に発生
- dragover：ドラッグ中の要素がドロップ対象の上にあるときに発生
- drop：要素がドロップされたときに発生
- dragend：ドラッグ操作が終了したときに発生
ondragイベントの実装例
以下のコードを実行すると、JavaScriptでondragイベントを扱う方法を確認できます。左側のボックスを右へ、または右側のボックスを左へドラッグしてみてください。
<!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>コードの解説
1. ドラッグ開始（dragstart）
dragStart() 関数では、event.dataTransfer.setData() を使って、ドラッグする要素のIDをデータとして保存しています。これにより、後ほどドロップ先でどの要素が移動されたのかを識別できます。
2. ドラッグ中（drag）
draggingNow() 関数は、要素がドラッグされている間に呼び出され、#box 内に「Dragged successfully!」というメッセージを表示します。これが ondrag イベントの動作部分です。
3. ドロップ許可（dragover）
dropNow() 関数内の event.preventDefault() は必須の処理です。ブラウザのデフォルト動作では要素のドロップが禁止されているため、この呼び出しによってドロップを可能にしています。
4. ドロップ処理（drop）
drop() 関数では、getData() で保存しておいた要素IDを取得し、appendChild() を使ってその要素をドロップ先に移動させています。
まとめ
要素がドラッグされているときに発生するイベントは ondrag です。ドラッグ開始時の ondragstart や、ドロップ時の ondrop と組み合わせることで、直感的なドラッグ＆ドロップUIを簡単に実装できます。
-
クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説
JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク
-
【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法
addEventListener()メソッドとはJavaScriptでは、addEventListener()メソッドを使うことで、指定した要素にイベントハンドラ（イベントリスナー）を登録できます。このメソッドの最大の特徴は、すでに設定されているイベントハンドラを上書きせずに新しいハンドラを追加できる点です。そのため、1つの要素に対して複数のイベントハンドラを同時に登録することも可能です。さらに、addEventListener()を利用すると、バブリング（イベントの伝播）への反応の仕方を柔軟に制御できます。mouseoverやclickをはじめ、さまざまな種類のイベントを扱えるのも魅力です。