HTMLのondragstartイベント属性とは？使い方とサンプルコードを解説

HTMLのondragstartイベント属性は、ユーザーがHTML要素や要素内のテキストのドラッグ操作を開始した瞬間に発火するイベント属性です。ドラッグ＆ドロップ機能を実装する際に、ドラッグ開始時の処理（データの設定やメッセージ表示など）を定義するために使用されます。

構文

ondragstartイベント属性の基本的な構文は以下のとおりです。

<tagname ondragstart="script"></tagname>

ondragstartイベント属性の使用例

ここでは、赤い円をドラッグすると「ドラッグを開始しました」というメッセージが表示され、ドラッグが終わると別のメッセージに切り替わるデモを作成します。ondragstartだけでなく、ondragend・ondrop・ondragoverなどの関連イベントも組み合わせて、実際のドラッグ＆ドロップの流れを確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    .drop-target {
        display: inline-block;
        width: 150px;
        height: 150px;
        border: 2px solid #FFF;
        margin: 1rem;
        vertical-align: middle;
        padding: 20px;
    }
    .circle {
        background: #db133a;
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
    .show {
        color: #fff;
        font-size: 1.2rem;
    }
</style>
</head>
<body>
<h1>HTML ondragstart Event Attribute Demo</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondragend="dragFinished(event)" draggable="true" class="circle"></p>
</div>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p>Now try to drag and drop the red circle</p>
<div class="show"></div>
<script>
    function dragStart(event) {
        event.dataTransfer.setData("Text", event.target.id);
        document.querySelector(".show").innerHTML = "Started to drag the red circle.";
    }
    function dragFinished(event) {
        document.querySelector(".show").innerHTML = "Finished dragging the red circle.";
    }
    function allowDrop(event) {
        event.preventDefault();
    }
    function drop(event) {
        event.preventDefault();
        event.target.appendChild(document.querySelector('.circle'));
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、2つのボックスのうち左側に赤い円が配置された画面が表示されます。

次に、赤い円を2つのボックス間でドラッグ＆ドロップしてみましょう。これにより、ondragstartイベント属性がどのように動作するかを確認できます。

円のドラッグを開始すると、ondragstartイベントが発火し、「Started to drag the red circle.」というメッセージが表示されます。
ドラッグが終了すると、ondragendイベントによって「Finished dragging the red circle.」というメッセージに切り替わります。
別のボックス上でドロップすると、ondropイベントにより円がそのボックス内へ移動します。

ポイントまとめ

ondragstartは、ドラッグ操作の開始時に発火するイベント属性です。
対象の要素には draggable="true" を設定する必要があります。
event.dataTransfer.setData() を使うことで、ドラッグ中のデータを受け渡しできます。
ドロップ先では ondragover 内で event.preventDefault() を呼び出さないと、ドロップが許可されません。

HTMLのnavigator.onLineプロパティでブラウザのオンライン・オフライン状態を判定する方法

HTMLのondropイベント属性とは？使い方をサンプルコードで解説

HTML ondragendイベント属性の使い方を徹底解説
ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q
HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説
HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプルここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。サンプルコード