【JavaScript】要素のドラッグ開始時に発生するイベント「ondragstart」とは？使い方を解説
ondragstartイベントとは
ondragstartイベントは、ユーザーが要素のドラッグ操作を開始した瞬間に発生するJavaScriptのイベントです。これはHTML5のドラッグ＆ドロップAPIの一部であり、draggable="true"属性を設定した要素に対して利用できます。
このイベントは、ドラッグされるデータをdataTransferオブジェクトに格納する際によく使用されます。dataTransferオブジェクトに保存したデータは、ドロップ先の要素側でgetData()メソッドを使って取り出すことができます。
以下のコードを実行して、ondragstartイベントの実装方法を実際に確認してみましょう。
サンプルコード
<!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)：ドラッグ開始時（ondragstart）に呼び出され、setData()メソッドでドラッグ対象要素のIDをdataTransferオブジェクトに保存します。
- dropNow(event)：ondragoverイベントで呼び出され、preventDefault()によってブラウザの既定の動作を無効化します。これにより、要素をドロップできるようになります。
- dragEnd(event)：ドラッグ終了時（ondragend）に呼び出され、結果表示用のボックスにメッセージを出力します。
- drop(event)：ドロップ時に呼び出され、getData()で保存しておいたIDを取得し、その要素をドロップ先へ移動（appendChild）させます。
ポイントまとめ
- ドラッグ可能にするには、対象要素にdraggable="true"属性を必ず設定する必要があります。
- ドロップを受け入れるには、ondragoverイベント内でpreventDefault()を呼び出すことが必須です。
- ドラッグ中のデータ受け渡しにはdataTransferオブジェクトを使用します。
-
JavaScriptでテキストが要素からオーバーフローしたときの対処法
textOverflowプロパティでテキストのはみ出しを解決する JavaScriptでテキストがコンテナ要素からあふれてしまう問題には、textOverflowプロパティを使って対処できます。このプロパティの値を「ellipsis」に設定すると、要素からあふれたテキストの末尾に省略記号（…）が表示され、レイアウトが崩れるのを防ぐことができます。 textOverflowを有効にするための条件 textOverflowプロパティを正しく機能させるには、対象の要素に以下のスタイルを併せて指定しておく必要があります。 overflow: hidden; … コンテナからはみ出した部分を非表示にし
-
【JavaScript入門】addEventListener()で要素にイベントハンドラを追加する方法
addEventListener()メソッドとはJavaScriptでは、addEventListener()メソッドを使うことで、指定した要素にイベントハンドラ（イベントリスナー）を登録できます。このメソッドの最大の特徴は、すでに設定されているイベントハンドラを上書きせずに新しいハンドラを追加できる点です。そのため、1つの要素に対して複数のイベントハンドラを同時に登録することも可能です。さらに、addEventListener()を利用すると、バブリング（イベントの伝播）への反応の仕方を柔軟に制御できます。mouseoverやclickをはじめ、さまざまな種類のイベントを扱えるのも魅力です。