dataTransferObject.setData( type, data )

dataTransferObject.setData( type, data )は、指定したデータ型「type」のデータ「data」を設定するメソッド。

ドラッグを開始した時点(ondragstartイベント)で使用することが多い。

構文

dataTransferObject.setData( type, data )

引数

type
データ型を指定する。
data
データを指定する。

window.onload = function () {
    $sampleElement = document.getElementById( "sample" );
    $sampleElement.ondragstart = function( $event ){

        // ドラッグした要素のIDを文字列型で設定
        $event.dataTransfer.setData( "Text", $event.target.id );

    };
}

サンプル

  1. リスト項目A
  2. リスト項目B
  3. リスト項目C

サンプルの動作について

ドラッグ&ドロップで、「リスト項目A~B」のリスト項目(li要素)を、赤い背景色のリスト(ol要素)から青い背景色のリスト(ol要素)へ、もしくは、青い背景色のリスト(ol要素)から赤い背景色のリスト(ol要素)へ移動できる。

サンプルのソースコード

JavaScript

<script>
function sampleDrag( $event ) {
    $event.dataTransfer.setData( "Text", $event.target.id );
}

function sampleDrop( $event, $this ) {
    $event.preventDefault();
    var $data = $event.dataTransfer.getData( "Text" );
    $this.appendChild( document.getElementById( $data ) );
}
function sampleAllowDrop( $event ) {
    $event.preventDefault();
}
function sampleChangeBackgroundColor( $this, $color ) {
    $this.style.backgroundColor = $color;
}
</script>

HTML

<ol
    id="dropSampleA"
    ondrop="sampleDrop( event, this ); sampleChangeBackgroundColor( this, 'red' );"
    ondragover="sampleAllowDrop( event ); sampleChangeBackgroundColor( this, 'yellow' );"
    ondragleave="sampleChangeBackgroundColor( this, 'red' );"
>
    <li id="dragSampleA" draggable="true" ondragstart="sampleDrag( event );">
        リスト項目A
    </li>
    <li id="dragSampleB" draggable="true" ondragstart="sampleDrag( event );">
        リスト項目B
    </li>
    <li id="dragSampleC" draggable="true" ondragstart="sampleDrag( event );">
        リスト項目C
    </li>
</ol>
<ol
    id="dropSampleB"
    ondrop="sampleDrop( event, this ); sampleChangeBackgroundColor( this, 'blue' );"
    ondragover="sampleAllowDrop( event ); sampleChangeBackgroundColor( this, 'yellow' );"
    ondragleave="sampleChangeBackgroundColor( this, 'blue' );"
>
</ol>
<div style="clear: both;"></div>

CSS

<style>
#dropSampleA,
#dropSampleB {
    float: left;
    width: 280px;
    min-height: 181px;
    padding: 10px;
    border: 1px solid gray;
    list-style-position: inside;
}
#dropSampleA {
    background-color: red;
}
#dropSampleB {
    background-color: blue;
}
#dragSampleA,
#dragSampleB,
#dragSampleC {
    width: 258px;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid gray;
    text-align: left;
}
#dragSampleA {
    background-color: pink;
}
#dragSampleB {
    background-color: lightblue;
}
#dragSampleC {
    background-color: lightgreen;
}
</style>

スポンサード リンク

カテゴリー: DataTransferオブジェクト, DOM, JavaScript, イベント, メソッド, リファレンス パーマリンク