ondropイベント

投稿日: 2014年3月26日 作成者: alphasis

ondropイベントとは、ドロップした時のイベント。

構文

HTML

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

例

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

JavaScript

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

サンプル１

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

2

1

ドロップ回数：0

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

  • 「2」をドラッグし、背景色が薄い青色である領域にドロップすると、領域内の数値に「2」を掛け合わせる。
  • 「2」をドラッグし、背景色が薄い青色である領域にドロップする度に、「ドロップ回数：」の右横の数値に１を加算する。
  • FireFox、Chrome、IE11にて動作確認。

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

JavaScript

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

HTML

<p>
    <span id="sampleDragA" draggable="true" ondragstart="sampleAOnDragStart( event );">2</span>
</p>
<div
id="sampleDropA"
ondrop="sampleACountUp(); sampleADrop( event, this );
event.preventDefault();"
ondragenter="event.preventDefault();"
ondragover="event.preventDefault();"
>
    1
</div>
<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;
}
#sampleDropA {
    width: 500px;
    padding: 20px 0;
    background-color: lightblue;
    text-align: center;
}
</style>

サンプル２

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

2

1

ドロップ回数：0

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

  • 「2」をドラッグし、背景色が薄い青色である領域にドロップすると、領域内の数値に「2」を掛け合わせる。
  • 「2」をドラッグし、背景色が薄い青色である領域にドロップする度に、「ドロップ回数：」の右横の数値に１を加算する。
  • FireFox、Chrome、IE11にて動作確認。

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

JavaScript

<script type="text/javascript">
window.onload = function () {
    var $sampleDragB = document.getElementById( "sampleDragB" );
    var $sampleDropB = document.getElementById( "sampleDropB" );
    $sampleDragB.ondragstart = function( $event ){
        $event.dataTransfer.setData( "Text", $event.target.innerHTML );
    };
    $sampleDropB.ondragenter = function( $event ){
        $event.preventDefault();
    };
    $sampleDropB.ondragover = function( $event ){
        $event.preventDefault();
    };
    $sampleDropB.ondrop = function( $event ){
        $event.preventDefault();
        var $data = $event.dataTransfer.getData( "Text" );
        this.innerHTML = this.innerHTML * $data;
        sampleBCountUp( $event );
    };
}
var $countB = 0;
function sampleBCountUp( $event ) {
    document.getElementById( "sampleOutputB" ).innerHTML = ++$countB;
}
</script>

HTML

<p>
    <span id="sampleDragB" draggable="true">2</span>
</p>
<div id="sampleDropB">1</div>
<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;
}
#sampleDropB {
    width: 500px;
    padding: 20px 0;
    background-color: lightblue;
    text-align: center;
}
</style>

スポンサード リンク

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