JavaScriptで要素のドラッグ完了時に発生するイベントとは？ondragendの使い方を解説
ondragendイベントとは
JavaScriptのondragendイベントは、要素のドラッグ操作が完全に終了したときに発生します。ドラッグ＆ドロップの一連の流れの中で、ユーザーがマウスボタンを離してドラッグが完了した瞬間にトリガーされるイベントです。
なお、ドラッグ関連のイベントには、ドラッグ開始時に発生するondragstart、ドロップ対象の上に要素があるときに発生するondragover、実際にドロップされたときに発生するondropなどがあり、これらと組み合わせて使うことで直感的なドラッグ＆ドロップ操作を実現できます。
実装例
以下のコードを実行すると、JavaScriptでondragendイベントを実装する方法を確認できます。左側のボックスを右へ、または右側のボックスを左へドラッグしてみてください。ドラッグが終了すると、画面下部のボックスにメッセージが表示されます。
<!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)" ondragend = "dragEnd(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 dropNow(event) {
event.preventDefault();
}
function dragEnd(event) {
document.getElementById("box").innerHTML = "Dragging ends!";
}
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(event)：ドラッグ開始時によばれ、dataTransfer.setData()を使ってドラッグする要素のIDを保存します。
dropNow(event)：ondragoverの既定動作をpreventDefault()で無効化し、ドロップを可能にします。
dragEnd(event)：ドラッグが完了したときにondragendイベント経由で呼び出され、結果表示用のボックスに「Dragging ends!」というメッセージを出力します。
drop(event)：要素がドロップされると、保存していたIDをもとにその要素を移動先に追加し、成功メッセージを表示します。
-
クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説
JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク
-
【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法
addEventListener()メソッドとはJavaScriptでは、addEventListener()メソッドを使うことで、指定した要素にイベントハンドラ（イベントリスナー）を登録できます。このメソッドの最大の特徴は、すでに設定されているイベントハンドラを上書きせずに新しいハンドラを追加できる点です。そのため、1つの要素に対して複数のイベントハンドラを同時に登録することも可能です。さらに、addEventListener()を利用すると、バブリング（イベントの伝播）への反応の仕方を柔軟に制御できます。mouseoverやclickをはじめ、さまざまな種類のイベントを扱えるのも魅力です。