DataTransfer クラスについて
DataTransfer クラスについて
■ DataTransfer クラスについて
データを格納するための入れ物として機能します。
ドラッグアンドドロップ、クリップボードで利用します。
■ DataTransfer オブジェクトを取得する
■ドラッグアンドドロップの場合（DragEvent）
DragEvent の、dataTransfer プロパティを使用します。
ドラッグを開始した時に、DataTransfer オブジェクトを取得する
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;"></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行されるイベント
// ------------------------------------------------------------
element.ondragstart = function (e){
if(!e) e = window.event; // レガシー
// DataTransfer オブジェクトを取得する
var data_transfer = e.dataTransfer;
// 出力テスト
console.log(data_transfer);
};
//-->
</script>
</body>
</html>
■クリップボードの場合（ClipboardEvent）
ClipboardEvent の、clipboardData プロパティを使用します。
ClipboardEvent から、DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){
// DataTransfer オブジェクトを取得する
var data_transfer = (e.clipboardData) || (window.clipboardData);
// 出力テスト
console.log(data_transfer);
});
データを格納する
■「コンテンツタイプ」を指定して、文字列データを格納する
setData() メソッドを使用します。
タイプ名ごとに、１つのデータを格納する事ができます。
既にデータが存在する場合は、上書きされます。
DataTransfer.setData( format , data ) :Void
| 第01引数 | String | データのタイプ名を指定（コンテンツタイプ） |
| 第02引数 | String | データを指定（文字列） |
| 戻り値 | Void | なし |
■第01引数（データのタイプ名）
格納するデータの、コンテンツタイプを指定します。
ここで指定できるのは、テキスト関連のみです。
サポートしていない場合、ブラウザによってはエラーが発生します。
■第01引数（最も互換性のあるタイプ名）
InternetExplorer 6 でも動作するタイプ名です。
| タイプ名 | 説明 |
| "text" | プレーンテキスト（"text/plain" と同等） |
■第01引数（HTML5 世代の一例）
| タイプ名 | 説明 |
| "text/plain" | プレーンテキスト |
| "text/html" | HTML 文字列 |
■データを格納する例（ドラッグ開始時）
■ドラッグを開始したか監視する
ondragstart イベントを使用します。
ドラッグ時のイベントについては、こちらで解説しています。
■使用例
ドラッグ開始時に、データを格納する
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;"></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行されるイベント
// ------------------------------------------------------------
element.ondragstart = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
// ------------------------------------------------------------
// テキストデータをセットする
// ------------------------------------------------------------
data_transfer.setData( "text" , "テスト文字列です" );
try{
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を格納する（HTML5 世代）
// ------------------------------------------------------------
data_transfer.setData( "text/plain" , "テスト文字列です" );
data_transfer.setData( "text/html" , "<span>テスト文字列です</span>" );
}catch(e){
}
};
//-->
</script>
</body>
</html>
■データを格納する例（クリップボード）
■カット/コピー操作が発生したか監視する
■使用例
コピー操作時に、データを格納する
// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = (e.clipboardData) || (window.clipboardData);
// ------------------------------------------------------------
// テキストデータをセットする
// ------------------------------------------------------------
data_transfer.setData( "text" , "テスト文字列です" );
try{
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を格納する（HTML5 世代）
// ------------------------------------------------------------
data_transfer.setData( "text/plain" , "テスト文字列です" );
data_transfer.setData( "text/html" , "<span>テスト文字列です</span>" );
}catch(e){
}
// ------------------------------------------------------------
// デフォルトのコピー操作を無効化
// ------------------------------------------------------------
e.preventDefault();
});
データを取得する
■「コンテンツタイプ」を指定して、文字列データを取得する
getData() メソッドを使用します。
タイプ名ごとに、１つのデータが格納されています。
DataTransfer.getData( format ) :String
| 第01引数 | String | データのタイプ名を指定（コンテンツタイプ） |
| 戻り値 | String | 文字列データが得られる。存在しない場合、空文字列が得られる。 |
■第01引数（データのタイプ名）
取得するデータの、コンテンツタイプを指定します。
ここで指定できるのは、テキスト関連のみです。
サポートしていない場合、ブラウザによってはエラーが発生します。
■第01引数（最も互換性のあるタイプ名）
InternetExplorer 6 でも動作するタイプ名です。
| タイプ名 | 説明 |
| "text" | プレーンテキスト（"text/plain" と同等） |
| "url" | URL 文字列（"text/uri-list" と同等） |
■第01引数（HTML5 世代の一例）
| タイプ名 | 説明 |
| "text/plain" | プレーンテキスト |
| "text/uri-list" | URI 文字列のリスト |
| "text/html" | HTML 文字列 |
■「コンテンツタイプ」をすべて取得する（HTML5 世代）
types プロパティを使用します。
DOMStringList オブジェクトが得られます。
null 値が得られる事もあります。
■ DOMStringList オブジェクトについて
配列のように中身を取り出せます。
中には、コンテンツタイプ名が格納されています。
■得られるコンテンツタイプについて
ここで得られるのは、テキスト関連のみです。
バイナリ関連が含まれる事はありません。（画像イメージやファイルなど）
■ファイルデータが存在する場合
"Files" という文字列が、含まれるようになります。
■ファイルリストを取得する（HTML5 世代）
files プロパティを使用します。
FileList オブジェクトが得られます。
null 値が得られる事もあります。
■ FileList オブジェクトについて
配列のように中身を取り出せます。
中には、File オブジェクトが格納されています。
■ File オブジェクトについて
ファイルについては、こちらで解説しています。
■得られるデータについて
ここで得られるのは、ファイル関連のみです。
画像イメージなどのバイナリデータが、Blob 型で含まれる事はありません。
■データを取得する例（ドロップ発生時）
■ドロップが発生したか監視する
ondrop イベントを使用します。
ドロップ時のイベントについては、こちらで解説しています。
■テキストデータを取得する
テキストデータを取得する
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "bbb" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ操作中に実行されるイベント（マウスカーソルが要素内に滞在中）
// ------------------------------------------------------------
element.ondragover = function (e){
// ドロップを許可し受け入れを表明（非標準）
return false;
};
// ------------------------------------------------------------
// ドロップしたときに実行されるイベント
// ------------------------------------------------------------
element.ondrop = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
// ------------------------------------------------------------
// テキストデータを取得する
// ------------------------------------------------------------
var str = data_transfer.getData("text");
// 出力テスト
console.log(str);
// ------------------------------------------------------------
// デフォルトのドロップ機能を無効化（非標準）
// ------------------------------------------------------------
return false;
};
//-->
</script>
</body>
</html>
■「コンテンツタイプ」と「データ」を順番に取得する（HTML5 世代）
「コンテンツタイプ」と「データ」を順番に取得する（HTML5 世代）
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "bbb" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ操作中に実行されるイベント（マウスカーソルが要素内に滞在中）
// ------------------------------------------------------------
element.addEventListener("dragover" , function (e){
// ドロップを許可し受け入れを表明
e.preventDefault();
});
// ------------------------------------------------------------
// ドロップ時に実行されるイベント
// ------------------------------------------------------------
element.addEventListener("drop" , function (e){
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
// ------------------------------------------------------------
// コンテンツタイプのリストを取得する
// ------------------------------------------------------------
var type_list = data_transfer.types;
if(!type_list) return;
// ------------------------------------------------------------
// データを順番に取得する
// ------------------------------------------------------------
var i;
var num = type_list.length;
for(i=0;i < num;i++){
try{
// コンテンツタイプを取得する
var type = type_list[i];
// データを取得する
var data = data_transfer.getData(type);
// 出力テスト
console.log(type);
console.log(data);
}catch(e){
}
}
// ------------------------------------------------------------
// デフォルトのドロップ機能を無効化
// ------------------------------------------------------------
e.preventDefault();
});
//-->
</script>
</body>
</html>
■ファイルを順番に取得する（HTML5 世代）
ファイルを順番に取得する（HTML5 世代）
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "bbb" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ操作中に実行されるイベント（マウスカーソルが要素内に滞在中）
// ------------------------------------------------------------
element.addEventListener("dragover" , function (e){
// ドロップを許可し受け入れを表明
e.preventDefault();
});
// ------------------------------------------------------------
// ドロップ時に実行されるイベント
// ------------------------------------------------------------
element.addEventListener("drop" , function (e){
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
// ------------------------------------------------------------
// ファイルリストを取得する
// ------------------------------------------------------------
var file_list = data_transfer.files;
if(!file_list) return;
// ------------------------------------------------------------
// ファイルを順番に取得する
// ------------------------------------------------------------
var i;
var num = file_list.length;
for(i=0;i < num;i++){
// ファイルを取得する
var file = file_list[i];
// 出力テスト
console.log("name:" + file.name);
console.log("size:" + file.size);
console.log("type:" + file.type);
}
// ------------------------------------------------------------
// デフォルトのドロップ機能を無効化
// ------------------------------------------------------------
e.preventDefault();
});
//-->
</script>
</body>
</html>
■データを取得する例（クリップボード）
■ペースト操作が発生したか監視する
"paste" イベントを使用します。
■テキストデータを取得する（HTML5 世代）
テキストデータを取得する（HTML5 世代）
// ------------------------------------------------------------
// ペースト操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("paste" , function(e){
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = (e.clipboardData) || (window.clipboardData);
// ------------------------------------------------------------
// テキストデータを取得する
// ------------------------------------------------------------
var str = data_transfer.getData("text");
// 出力テスト
console.log(str);
});
■「コンテンツタイプ」と「データ」を順番に取得する（HTML5 世代）
「コンテンツタイプ」と「データ」を順番に取得する（HTML5 世代）
// ------------------------------------------------------------
// ペースト操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("paste" , function(e){
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = (e.clipboardData) || (window.clipboardData);
// ------------------------------------------------------------
// コンテンツタイプのリストを取得する
// ------------------------------------------------------------
var type_list = data_transfer.types;
if(!type_list) return;
// ------------------------------------------------------------
// データを順番に取得する
// ------------------------------------------------------------
var i;
var num = type_list.length;
for(i=0;i < num;i++){
try{
// コンテンツタイプを取得する
var type = type_list[i];
// データを取得する
var data = data_transfer.getData(type);
// 出力テスト
console.log(type);
console.log(data);
}catch(e){
}
}
// ------------------------------------------------------------
// デフォルトのペースト操作を無効化
// ------------------------------------------------------------
e.preventDefault();
});
■ファイルを順番に取得する（HTML5 世代）
一部のブラウザのみ対応しています。
ファイルを順番に取得する（HTML5 世代）
// ------------------------------------------------------------
// ペースト操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("paste" , function(e){
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = (e.clipboardData) || (window.clipboardData);
// ------------------------------------------------------------
// ファイルリストを取得する
// ------------------------------------------------------------
var file_list = data_transfer.files;
if(!file_list) return;
// ------------------------------------------------------------
// ファイルを順番に取得する
// ------------------------------------------------------------
var i;
var num = file_list.length;
for(i=0;i < num;i++){
// ファイルを取得する
var file = file_list[i];
// 出力テスト
console.log("name:" + file.name);
console.log("size:" + file.size);
console.log("type:" + file.type);
}
// ------------------------------------------------------------
// デフォルトのペースト操作を無効化
// ------------------------------------------------------------
e.preventDefault();
});
データを除外する
■「コンテンツタイプ」を指定して、文字列データを除外する
clearData() メソッドを使用します。
タイプ名ごとに、１つのデータが格納されています。
DataTransfer.clearData( format ) :Void
| 第01引数(略可) | String | データのタイプ名（コンテンツタイプ）を指定。省略した場合は全てクリア。 |
| 戻り値 | Void | なし |
■第01引数（データのタイプ名）
除外するデータの、コンテンツタイプを指定します。
ここで指定できるのは、テキスト関連のみです。
サポートしていない場合、ブラウザによってはエラーが発生します。
引数を省略した場合、すべてのデータを除外します。
■第01引数（最も互換性のあるタイプ名）
InternetExplorer 6 でも動作するタイプ名です。
| タイプ名 | 説明 |
| "text" | プレーンテキスト（"text/plain" と同等） |
| "url" | URL 文字列（"text/uri-list" と同等） |
■第01引数（HTML5 世代の一例）
| タイプ名 | 説明 |
| "text/plain" | プレーンテキスト |
| "text/uri-list" | URI 文字列のリスト |
| "text/html" | HTML 文字列 |
■すべてのデータを除外する
clearData() メソッドを使用します。
引数を省略します。
この場合、バイナリ関連も含めて、すべて除外されます。
■データを除外する例（ドラッグ開始時）
■ドラッグを開始したか監視する
ondragstart イベントを使用します。
ドラッグ時のイベントについては、こちらで解説しています。
■使用例
ドラッグ開始時に、データを除外する（HTML5 世代）
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;"></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行されるイベント
// ------------------------------------------------------------
element.addEventListener( "dragstart" , function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
try{
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を格納する
// ------------------------------------------------------------
data_transfer.setData( "text/plain" , "テスト文字列です" );
data_transfer.setData( "text/html" , "<span>テスト文字列です</span>" );
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を除外する
// ------------------------------------------------------------
data_transfer.clearData( "text/plain" );
data_transfer.clearData( "text/html" );
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を取得する
// ------------------------------------------------------------
console.log( data_transfer.getData( "text/plain") );
console.log( data_transfer.getData( "text/html") );
}catch(e){
}
});
//-->
</script>
</body>
</html>
■データを除外する例（クリップボード）
■カット/コピー操作が発生したか監視する
■使用例
コピー操作時に、データを除外する（HTML5 世代）
// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = (e.clipboardData) || (window.clipboardData);
try{
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を格納する
// ------------------------------------------------------------
data_transfer.setData( "text/plain" , "テスト文字列です" );
data_transfer.setData( "text/html" , "<span>テスト文字列です</span>" );
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を除外する
// ------------------------------------------------------------
data_transfer.clearData( "text/plain" );
data_transfer.clearData( "text/html" );
// ------------------------------------------------------------
// 「コンテンツタイプ」を指定して「データ」を取得する
// ------------------------------------------------------------
console.log( data_transfer.getData( "text/plain") );
console.log( data_transfer.getData( "text/html") );
}catch(e){
}
// ------------------------------------------------------------
// デフォルトのペースト操作を無効化
// ------------------------------------------------------------
e.preventDefault();
});
許可エフェクトを設定する
■ドラッグ側の許可エフェクトを設定する
effectAllowed プロパティを使用します。
■設定タイミングについて
ondragstart イベント内で設定します。
■設定値について
以下の文字列を設定します。
「移動」「複製」「リンク」の３つの概念があります。
| 文字列 | 説明 |
| "copy" | 「複製」のみ許可します。 |
| "move" | 「移動」のみ許可します。 |
| "link" | 「リンク」のみ許可します。 |
| "copyMove" | 「複製」と「移動」を許可します。 |
| "copyLink" | 「複製」と「リンク」を許可します。 |
| "linkMove" | 「リンク」と「移動」を許可します。 |
| "all" | すべて許可します。「複製」と「移動」と「リンク」の３つです。 |
| "none" | すべて禁止します。 |
| "uninitialized" | 未設定のデフォルトの値です。（"all" と同等） |
■使用例
ドラッグ時に許可エフェクトを設定する
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;"></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグを開始した時に実行されるイベント
// ------------------------------------------------------------
element.ondragstart = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
// ------------------------------------------------------------
// 文字データをセット
// ------------------------------------------------------------
data_transfer.setData("text" , "テスト文字列");
// ------------------------------------------------------------
// 「複製」のみ許可する
// ------------------------------------------------------------
data_transfer.effectAllowed = "copy";
};
//-->
</script>
</body>
</html>
■ドロップ側のエフェクトを設定する
dropEffect プロパティを使用します。
■設定タイミングについて
ondragover イベント内で設定します。
■設定値について
以下の文字列を設定します。
「移動」「複製」「リンク」の３つの概念があります。
| 文字列 | 説明 |
| "copy" | ドラッグ側で、「複製」が許可されていれば受け入れます。それ以外は拒否します。 |
| "move" | ドラッグ側で、「移動」が許可されていれば受け入れます。それ以外は拒否します。 |
| "link" | ドラッグ側で、「リンク」が許可されていれば受け入れます。それ以外は拒否します。 |
| "none" | すべての受け入れを拒否します。（明示的に設定した場合） |
| 未設定 | 「移動」「複製」「リンク」の１つでも許可されていれば受け入れます。 |
■未設定時のデフォルトの値に注意
未設定のデフォルト値として、"none" 値が格納されている事があります。
この場合、「移動」「複製」「リンク」の１つでも許可されていれば受け入れます。
明示的に、"none" 値をセットした場合、すべての受け入れを拒否します。
■アイコンの変化について
effectAllowed と dropEffect プロパティの組み合わせで、アイコンが変化します。
左側が、effectAllowed（ドラッグ側）の設定です。
上側が、dropEffect（ドロップ側）の設定です。
| 未設定 | "copy" | "move" | "link" | "none" | |
| "copy" |  | |  | | |
| "move" |  | | | | |
| "link" |  | | | | |
| "copyMove" | | | | | |
| "copyLink" | | | | | |
| "linkMove" | | | | | |
| "all" | | | | | |
| "none" | | | | | |
| "uninitialized" | | | | | |
■使用例
ドロップ側のエフェクトを設定する
<html>
<body>
<div id="bbb" style="width:400px; height:300px; background:#ccf;" ></div>
<script type="text/javascript">
<!--
// "bbb" という ID 属性のエレメントを取得する
var element = document.getElementById("bbb");
// ------------------------------------------------------------
// ドラッグ操作中に実行されるイベント（マウスカーソルが要素内に滞在中）
// ------------------------------------------------------------
element.ondragover = function (e){
if(!e) e = window.event; // レガシー
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = e.dataTransfer;
// ------------------------------------------------------------
// 「複製」が許可されていれば受け入れる
// ------------------------------------------------------------
data_transfer.dropEffect = "copy";
// ------------------------------------------------------------
// ドロップを許可し受け入れを表明（非標準）
// ------------------------------------------------------------
return false;
};
//-->
</script>
</body>
</html>
ドラッグ時に画像を表示する
■ドラッグ時に任意のエレメントを描画する（HTML5 世代）
setDragImage() メソッドを使用します。
InternetExplorer 11 の時点では、未対応です。
Opera(Presto 版) では動作しません。
DataTransfer.setDragImage( エレメント , x , y ) :Void
| 第01引数 | HTMLElement | 描画したい、HTMLElement オブジェクトを指定します。 |
| 第02引数 | Number | 水平オフセット位置を指定します。負の値で右、正の値で左に移動します。 |
| 第03引数 | Number | 垂直オフセット位置を指定します。負の値で下、正の値で上に移動します。 |
| 戻り値 | Void | なし |
■第01引数（エレメント）
描画したい、HTMLElement オブジェクトを指定します。
画像を表示したい場合は、HTMLImageElement オブジェクトをセットします。
画像イメージについては、こちらで解説しています。
画像が読み込み途中であった場合、イメージは表示されません。
■使用例
ドラッグ時に画像を表示する（HTML5 世代）
<html>
<body>
<div id="aaa" draggable="true" style="width:400px; height:300px; background:#fcc;" ></div>
<script type="text/javascript">
<!--
// "aaa" という ID 属性のエレメントを取得する
var element = document.getElementById("aaa");
// ------------------------------------------------------------
// ドラッグ時に描画したい画像イメージ
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();
// URL を指定して、画像の読み込みを開始する
image.src = "http://example.com/drag.png";
// ------------------------------------------------------------
// ドラッグ開始時に実行されるイベント
// ------------------------------------------------------------
element.addEventListener( "dragstart" , function (e){
// DataTransfer オブジェクトを取得する
var data_transfer = e.dataTransfer;
// 文字データをセット
data_transfer.setData("text" , "テスト文字列");
// ドラッグイメージを設定する
data_transfer.setDragImage(image , 0 , 0);
});
//-->
</script>
</body>
</html>