dataTransfer | NN なし IE 5(Win) DOM なし | ||
dataTransfer オブジェクト (event オブジェクトのプロパティとしてアクセスが可能) は、Windows 版 IE 5 以降のスクリプトで、テキストデータの転送時に使用できる一時的なコンテナです。特に、カット、コピー、ペーストのシミュレートやドラッグの制御など、スクリプト制御による操作に使用できます。スクリプトでは、要素のテキストのみ、要素の HTML 全体、またはイメージの URL など、dataTransfer オブジェクトに格納するデータの種類を制御できます。たとえば、子供向けのページで何種類かの動物のシンプルなアイコンイメージが表示されているとします。ユーザーが犬のアイコンをドラッグし始めると、img 要素の ondragstart イベントハンドラーを介して起動されたスクリプトが、この要素のカスタム属性値 (犬の写真の URL など) を dataTransfer オブジェクトに格納します。このアイコンを特定の領域にドロップすると、ondrop イベントハンドラーの関数が dataTransfer オブジェクトのデータを読み取り、イメージをページ上の領域に読み込みます。 |
|||
新たなイベントアクションが発生するたびにイベントオブジェクトによりプロパティが変更される場合であっても、dataTransfer オブジェクトには、スクリプトによってオブジェクトやその他のデータが削除されるまで、データが保持されます。dataTransfer オブジェクトのプロパティの機能は、clipboardData オブジェクトの機能とは異なっています。dropEffect プロパティと effectAllowed プロパティを設定すると、ドラッグ & ドロップ操作の間に表示されるカーソルアイコンのタイプをスクリプトで制御できます。例 9-1 に、dataTransfer オブジェクトのプロパティやメソッドをドラッグイベントに関連付けることにより、カーソルをドロップターゲットの上に置くと、形が "コピー" スタイルに変化する例を示します。 |
|||
このオブジェクトによるデータ転送、および clipboardData オブジェクトの詳細については、http://msdn.microsoft.com/workshop/author/datatransfer/overview.asp を参照してください。 |
|||
相当する HTML コード | |||
なし |
|||
オブジェクト参照 | |||
[window.]event.dataTransfer |
|||
オブジェクト固有のプロパティ | |||
|
|||
オブジェクト固有のメソッド | |||
|
|||
オブジェクト固有のイベントハンドラープロパティ | |||
なし |
dropEffect、effectAllowed | NN なし IE 5 DOM なし |
読み書き | |
これら 2 つのプロパティは連携して機能しますが、その対象となるステージは dataTransfer オブジェクトが関係するドラッグ操作時において異なります。どちらのプロパティも、ドラッグ & ドロップ操作時のカーソル表示を制御します。ドラッグ操作開始時のカーソルスタイルは、ondragstart イベントと effectAllowed プロパティを介して設定します。ドロップターゲットの ondragover イベントハンドラーおよび ondragenter イベントハンドラーでは、dropEffect プロパティを目的のカーソルスタイルに設定し、また event.returnValue プロパティは false に設定します。これにより、ondrop イベントハンドラーで、dropEffect プロパティによるカーソル設定だけでなく、ドロップ操作の処理も可能となります。これらのイベントやプロパティのインタラクションの簡単な実例については、例 9-1 を参照してください。 |
|
例 | |
event.dataTransfer.dropEffect= "copy"; |
|
値 | |
copy、link、move、none のいずれかの定数を示す文字列。大文字と小文字は区別されません。 |
|
既定値 | |
none |
clearData() | NN なし IE 5(Win) DOM なし |
clearData([dataFormat]) | |
dataTransfer オブジェクトからデータを削除します。 |
|
パラメータ | |
|
|
戻り値 | |
なし |
getData() | NN なし IE 5(Win) DOM なし |
getData(dataFormat) | |
dataTransfer オブジェクトに格納されたデータのコピーを返します。dataTransfer のコンテンツに変化はないため、以降も別のスクリプトステートメントで読み出すことができます。 |
|
パラメータ | |
|
|
戻り値 | |
文字列 |
setData() | NN なし IE 5(Win) DOM なし |
setData(dataFormat, stringData) | |
dataTransfer オブジェクトにデータを格納します。データの格納に成功すると、ブール値 true を返します。 |
|
パラメータ | |
|
|
戻り値 | |
true または false のブール値 |