ondragendイベント

ondragendイベントとは、ドラッグ操作を終了した時のイベント。

構文

HTML

<element ondragend="イベントハンドラ">

div要素
<div ondragend="イベントハンドラ">div要素</div>
span要素
<span ondragend="イベントハンドラ">span要素</span>
li要素
<li ondragend="イベントハンドラ">リスト項目</li>

JavaScript

object.ondragend = function(){ イベントハンドラ };

サンプル1

HTMLドキュメント上でイベントハンドラを登録するサンプル。

サンプルドラッグA

ドラッグ操作終了回数:0

サンプル1の動作について

  1. 「サンプルドラッグA」のドラッグ操作を終了する度に、「ドラッグ操作終了回数:」の右横の数値に1を加算する。
  2. FireFox、Chrome、IE11にて動作確認。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
function sampleAOnDragStart( $event ){
    $event.dataTransfer.setData( "Text", $event.target.id );
};
var $countA = 0;
function sampleACountUp() {
    document.getElementById( "sampleOutputA" ).innerHTML = ++$countA;
}
</script>

HTML

<p>
    <span id="sampleDragA" draggable="true" ondragstart="sampleAOnDragStart( event );" ondragend="sampleACountUp( event );">サンプルドラッグA</span>
</p>
<p>
    ドラッグ操作終了回数:<span id="sampleOutputA" style="margin-left: 10px;">0</span>
</p>

CSS

<style>
#sampleDragA {
    padding: 0 5px;
    border: 1px solid gray;
    background-color: yellow;
    cursor: pointer;
}
</style>

サンプル2

JavaScript上で動的にイベントハンドラを登録するサンプル。

サンプルドラッグB

ドラッグ操作終了回数:0

サンプル2の動作について

  1. 「サンプルドラッグB」のドラッグ操作を終了する度に、「ドラッグ操作終了回数:」の右横の数値に1を加算する。
  2. FireFox、Chrome、IE11にて動作確認。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sampleDragB" ).ondragstart = function( $event ){
        $event.dataTransfer.setData( "Text", $event.target.id );
    };
    document.getElementById( "sampleDragB" ).ondragend = function( $event ){
        sampleBCountUp();
    };
}
var $countB = 0;
function sampleBCountUp() {
    document.getElementById( "sampleOutputB" ).innerHTML = ++$countB;
}
</script>

HTML

<p>
    <span id="sampleDragB" draggable="true">サンプルドラッグB</span>
</p>
<p>
    ドラッグ操作終了回数:<span id="sampleOutputB" style="margin-left: 10px;">0</span>
</p>

CSS

<style>
#sampleDragB {
    padding: 0 5px;
    border: 1px solid gray;
    background-color: yellow;
    cursor: pointer;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, ドラッグ&ドロップイベント, リファレンス パーマリンク