dataTransfer オブジェクトの HTML5 説明

ringa_lee

リリース： 2017-10-15 10:57:14

オリジナル

3279 人が閲覧しました

[はじめに] HTML5 ドラッグアンドドロップデータ送信ネイティブドラッグアンドドロップは、dragstart、drag、dragend イベントを通じて実装されます。ただし、これは単なるドラッグアンドドロップです。IE6 と IE7 にはまだドラッグアンドドロップの問題があり、データ交換は実装されていません。データの交換を実現するために、IE5 では dataTransfer オブジェクトが導入されました。

HTML5 ドラッグアンドドロップデータ送信

ネイティブドラッグアンドドロップは、dragstart、drag、dragend イベントを通じて実装されます。ただし、これは単なるドラッグアンドドロップです。IE6 と IE7 にはまだドラッグアンドドロップの問題があり、データ交換は実装されていません。データの交換を実現するために、IE5 では dataTransfer オブジェクトが導入されました。 dataTransfer オブジェクトはイベントオブジェクトのプロパティであり、ドラッグされた要素からドロップターゲットに文字列形式でデータを転送するために使用されます。 dataTransfer オブジェクトはイベントオブジェクトのプロパティであるため、ドラッグアンドドロップイベントのイベントハンドラー内でのみアクセスできます。イベントハンドラーでは、このオブジェクトのプロパティとメソッドを使用して、ドラッグアンドドロップ機能を完了できます。

dataTransfer オブジェクトには、getData() メソッドと setData() メソッドという 2 つの主要なメソッドがあります。これら 2 つのメソッドの英語の文字通りの意味から、その用途を大まかに推測できます。 getData() メソッドは、setData() メソッドで保存した値を取得できます。 setData() メソッドの最初のパラメータは、getData() メソッドの唯一のパラメータでもあり、データ型を保存するために使用される文字列で、値は「text」または「URL」です。

IE は、「テキスト」または「URL」という 2 つの有効なデータ型のみを定義しますが、HTML5 はこれを拡張して、さまざまな MIME タイプを指定できるようにします。下位互換性のために、HTML5 は「text」または「URL」もサポートしますが、これら 2 つのタイプは「text/plain」または「text/url-list」にマップされます。

実はdataTransferオブジェクトはMIMEタイプごとに値を保存することができます。言い換えれば、同僚がこのオブジェクトにテキストと URL を保存しても、他に問題はありません。ただし、dataTransfer オブジェクトに格納されているデータは、drop イベントハンドラーでのみ読み取ることができます。データが ondrop ハンドラーで読み取られない場合、dataTransfer オブジェクトは破棄され、データは失われます。

テキストボックス内のテキストをドラッグすると、ブラウザは setData() メソッドを呼び出して、ドラッグしたテキストを dataTransfer オブジェクトに「テキスト」形式で保存します。同様に、リンクまたは画像をドラッグアンドドロップすると、setData() メソッドが呼び出され、URL が保存されます。次に、これらの要素をドロップターゲットにドラッグアンドドロップすると、getData() メソッドを通じてデータを読み取ることができます。もちろん、開発者は、後で使用できるように、dragstart イベントハンドラーで setData() を呼び出して、転送するデータを手動で保存することもできます。

データをテキストで保存するのとURLとして保存するのは違います。データをテキスト形式で保存した場合、データは特別な処理を受けません。 URL 形式で保存すると、ブラウザはそれを Web ページ内のリンクとして扱います。この URL を別のブラウザウィンドウに配置すると、その URL を開くことができます。

Firefox 5 以前のバージョンでは、「url」と「text」を「」と「text/plain」にマッピングできません。ただし、「Text」(大文字の T) を「text/plain」にマッピングできます。クロスブラウザーの状況で dataTransfer オブジェクトからデータをより適切に取得するには、URL データを取得するときに 2 つの値を検出し、テキストデータを取得するときに「Text」を使用するのが最善です。

注: IE10 とそれ以前のバージョンではまだ拡張 MIME タイプ名がサポートされておらず、認識できないデータタイプが発生するとエラーが報告されるため、必ず短いデータタイプを最初に指定してください。ただし、「text」または「URL」の値は IE でのみ必須であり、Firefox 3.6 以降、Chrome、Opera では他の値を使用して文字列を設定することもできます。

dropEffect 属性とeffectAllowed 属性

dataTransfer オブジェクトを使用すると、データを転送するだけでなく、ドラッグされた要素や配置対象の要素が dataTransfer オブジェクトを通じてどのような操作を受け取れるかを決定することができます。このような機能を実現するには、dropEffect 属性とeffectAllowed 属性を使用します。

dropEffect 属性

このうち、dropEffect 属性を通じて、ドラッグされた要素がどのような動作を実行できるかを知ることができます。この属性の 4 つの値は次のとおりです:

none: ドラッグされた要素をここに配置できません。これは、テキストボックスを除くすべての要素のデフォルト値です。

move: ドラッグされた要素をドロップターゲットに移動する必要があります。

コピー: ドラッグされた要素をドロップターゲットにコピーする必要があります。

リンク: ターゲットを配置すると、ドラッグされた要素が開きます (ただし、ドラッグされた要素は URL アドレスを持つリンクである必要があります)。

要素をドロップターゲットにドラッグすると、上記の各値によりカーソルが異なるシンボルとして表示されます。

effectAllowed属性

dropEffect属性だけでは効果がありません。これは、effectAllowed 属性と組み合わせて使用した場合にのみ有効になります。 effectAllowed 属性は、要素のドラッグのどの動作が許可されるかを示します (dropEffect)。 effectAllowed 属性にも多くの値があり、その値は次のとおりです:

初期化されていない: ドラッグされた要素には配置動作が設定されていません。

none: ドラッグされた要素はいかなる動作も行うことができません。

コピー: 値が「コピー」のdropEffectのみが許可されます。

Link: 値が「link」のdropEffectのみが許可されます。

move: 値「move」を持つdropEffectのみが許可されます。

copyLink: 「copy」と「link」の値を持つdropEffectを許可します。

copyMove: 「コピー」と「移動」の値を持つdropEffectを許可します。

linkMove: 「link」と「move」の値を持つdropEffectを許可します。

all：任意のdropEffectを許可します。

effectAllowed 属性を設定するには、ondragstart イベントハンドラーで設定する必要があります。小さな例は次のとおりです

HTML コード

[html] view plaincopyprint?

<ul>  
    <li draggable="true">梦龙小站</li>  
    <li draggable="true">梦龙小站</li>  
    <li draggable="true">梦龙小站</li>  
</ul>  
<a href="http://www.baidu.com/">梦龙小站</a>  
<p id="p1">梦龙小站</p>

ログイン後にコピー

CSS コード

[css] view plaincopyprint?

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}  
#p1{ width:100px; height:100px; background:red; margin:300px;}

ログイン後にコピー

JavaScript コード