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 );
};
}
$sampleElement = document.getElementById( "sample" );
$sampleElement.ondragstart = function( $event ){
// ドラッグした要素のIDを文字列型で設定
$event.dataTransfer.setData( "Text", $event.target.id );
};
}
サンプル
- リスト項目Ａ
- リスト項目Ｂ
- リスト項目Ｃ
サンプルの動作について
ドラッグ＆ドロップで、「リスト項目Ａ～Ｂ」のリスト項目（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>
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 );">
リスト項目Ａ
</li>
<li id="dragSampleB" draggable="true" ondragstart="sampleDrag( event );">
リスト項目Ｂ
</li>
<li id="dragSampleC" draggable="true" ondragstart="sampleDrag( event );">
リスト項目Ｃ
</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>
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 );">
リスト項目Ａ
</li>
<li id="dragSampleB" draggable="true" ondragstart="sampleDrag( event );">
リスト項目Ｂ
</li>
<li id="dragSampleC" draggable="true" ondragstart="sampleDrag( event );">
リスト項目Ｃ
</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>
#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>