<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">

		<div id="Description">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">dataTransfer</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">n/a</span> IE <span class="emphasis">5(Win)</span>  DOM <span class="emphasis">n/a</span>&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description">
						<p>The <span class="literal">dataTransfer</span> object (accessible as a property
of the <span class="literal">event</span> object) is a temporary container that
scripts in IE 5 and later for Windows can use to transfer text data,
particularly during script-controlled operations that simulate
cutting, copying, and pasting, or that control dragging. Your script
controls what data is stored in the <span class="literal">dataTransfer</span>
object, such as just the text of an element, an
element's entire HTML, or the URL of an image. For
example, a page for children could display simple icon images of
several different kinds of animals. If the user starts dragging the
dog icon, the script initiated by the <span class="literal">img</span>
element's <span class="literal">ondragstart</span> event
handler can store a custom attribute value of that element (perhaps
the URL of a pretty dog photo) into the
<span class="literal">dataTransfer</span> object. When the user drops the icon
into the designated area, the <span class="literal">ondrop</span> event
handler's function reads the
<span class="literal">dataTransfer</span> object's data, and
loads the photo image into position on the page.
</p>
							</td>
						</tr>
						<tr>
							<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
						</tr>
						<tr>
							<td colspan="2"><p>			Even though an event object changes its properties with each new
event action, the <span class="literal">dataTransfer</span> object preserves
its data from one event to the next, until a script removes the data
from the object or other data is stored in it. Properties of the
<span class="literal">dataTransfer</span> object distinguish its powers from
those of the <span class="literal">clipboardData</span> object. By setting the
<span class="literal">dropEffect</span> and <span class="literal">effectAllowed</span>
properties, your scripts can control the type of cursor icon that
appears during drag and drop operations. Example 9-1 demonstrates how
the properties and methods of the <span class="literal">dataTransfer</span>
object can be wired to dragging events such that the cursor changes
to a "copy" style when rolled atop
a desired drop target.
</p>
							</td>
						</tr>
						<tr>
							<td colspan="2"><p>			For more information on transferring data via this object and the
<span class="literal">clipboardData</span> object, visit http://msdn.microsoft.com/workshop/author/datatransfer/overview.asp.
</p>
												</td>
</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="htmlequivalent"><span class="title">HTML Equivalent</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>			None.</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">Object Model Reference</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]event.dataTransfer</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectspecificproperties"><span class="title">Object-Specific Properties</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td>
						<table border="1"><tbody><tr><td><span class="literal">dropEffect</span></td><td><span class="literal">effectAllowed</span></td>
								</tr>
							</tbody></table>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectspecificmethods"><span class="title">Object-Specific Methods</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td>
						<table border="1"><tbody><tr><td><span class="literal">clearData( )</span></td><td><span class="literal">getData( )</span></td><td><span class="literal">setData( )</span></td>
								</tr>
							</tbody></table>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectspecificeventhandlerproperties"><span class="title">Object-Specific Event Handler Properties</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>			None. </p>
					</td>
				</tr>
			</table>
		</div><div id="dropEffect, effectAllowed">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">dropEffect, effectAllowed</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">n/a</span> IE <span class="emphasis">5</span>  DOM <span class="emphasis">n/a</span>&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">Read/Write&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description">
						<p>These two properties work together but at different stages along a
dragging operation that involves the <span class="literal">dataTransfer</span>
object. They both control the appearance of the cursor during the
drag and drop process. Assign a cursor style at the beginning of a
drag operation via the <span class="literal">ondragstart</span> event and
<span class="literal">effectAllowed</span> property. The drop
target's <span class="literal">ondragover</span> and
<span class="literal">ondragenter</span> event handlers should set the
<span class="literal">dropEffect</span> property to the desired cursor style,
and also set the <span class="literal">event.returnValue</span> property to
<span class="literal">false</span>. This opens the way for the
<span class="literal">ondrop</span> event handler not only to set the cursor
via the <span class="literal">dropEffect</span> property, but to process the
drop action. See Example 9-1 for a simple demonstration of the
interaction of all these events and properties.
</p>
												</td>
</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">Example</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>event.dataTransfer.dropEffect= "copy";</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">Value</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>			Case-insensitive constant (as a string): <span class="literal">copy</span> |
<span class="literal">link</span> | <span class="literal">move</span> |
<span class="literal">none</span>.
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" nowrap colspan="2" class="default"><span class="title">Default</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>			<span class="literal">none</span></p>
					</td>
				</tr>
			</table>
		</div><div id="clearData( )">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">clearData( )</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">n/a</span> IE <span class="emphasis">5(Win)</span>  DOM <span class="emphasis">n/a</span>&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal">clearData([<span class="replaceable">dataFormat</span>])</p>
					</td><td valign="top" nowrap class="requirements">&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description">
						<p>Removes data from the <span class="literal">dataTransfer</span> object.</p>
												</td>
</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="parameters"><span class="title">Parameters</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td>
<dl>
<dt><var class="replaceable">dataFormat</var></dt>
<dd>
<p>An optional string specifying the format for the data to be removed.
Earlier plans to allow multiple data types appear to have fallen
through. As of IE 6, the only reliable format is
<span class="LITERAL">Text</span>. Omitting the parameter deletes all data of
all types.
</p>
</dd>
</dl>					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="returnedvalue"><span class="title">Returned Value</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>			None.</p>
					</td>
				</tr>
			</table>
		</div><div id="getData( )">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">getData( )</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">n/a</span> IE <span class="emphasis">5(Win)</span>  DOM <span class="emphasis">n/a</span>&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal">getData(<span class="replaceable">dataFormat</span>)</p>
					</td><td valign="top" nowrap class="requirements">&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description">
						<p>Returns a copy of data from the <span class="literal">dataTransfer</span>
object. The <span class="literal">dataTransfer</span> contents remain intact
for subsequent reading in other script statements.
</p>
												</td>
</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="parameters"><span class="title">Parameters</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td>
<dl>
<dt><var class="replaceable">dataFormat</var></dt>
<dd>
<p>A string specifying the format for the data to be read. Earlier plans
to allow multiple data types appear to have fallen through. As of IE
6, the only reliable format is <span class="LITERAL">Text</span>.
</p>
</dd>
</dl>					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="returnedvalue"><span class="title">Returned Value</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>			String.</p>
					</td>
				</tr>
			</table>
		</div><div id="setData( )">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">setData( )</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">n/a</span> IE <span class="emphasis">5(Win)</span>  DOM <span class="emphasis">n/a</span>&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal">setData(<span class="replaceable">dataFormat</span>,
<span class="replaceable">stringData</span>)</p>
					</td><td valign="top" nowrap class="requirements">&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description">
						<p>Stores string data in the <span class="literal">dataTransfer</span> object.
Returns Boolean <span class="literal">true</span> if the assignment is
successful
</p>
												</td>
</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="parameters"><span class="title">Parameters</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td>
<dl>
<dt><var class="replaceable">dataFormat</var></dt>
<dd>
<p>A string specifying the format for the data to be read. Earlier plans
to allow multiple data types appear to have fallen through. As of IE
6, the only reliable format is <span class="LITERAL">Text</span>. While the
method accepts <span class="LITERAL">URL</span> as a format, reading a set
value in that format is not successful.
</p>
</dd>
<dt><var class="replaceable">stringData</var></dt>
<dd>
<p>Any string value, including strings that contain HTML tags.</p>
</dd>
</dl>					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="returnedvalue"><span class="title">Returned Value</span></td>
				</tr>
				<tr>
					<td colspan="2"><p>			Boolean value: <span class="literal">true</span> | <span class="literal">false</span>.</p>
					</td>
				</tr>
			</table>
		</div>

</body>
</html>