Drop.html revision 4fcbec6145d16637205990699912fb90f6a3807c
<html>
<head>
<title>API: dd Drop (YUI Library)</title>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<h3>dd <span class="subtitle">3.00PR1</span></h3>
<p>
> Drop
</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form name="yui-classopts-form">
<span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> <label for="showprivate">Show Private</label></span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> <label for="showprotected">Show Protected</label></span>
<span id="classopts"><input type="checkbox" name="showdeprecated" id="showdeprecated" /> <label for="showdeprecated">Show Deprecated</label></span>
</form>
<h2>
Class <b>Drop</b>
<span class="extends">
</span>
<span class="extends">
</span>
</code>
</h2>
<!-- class tree goes here -->
<dl class="subclasses">
<dt>Known Subclasses:</dd>
<dd>
</dd>
</dl>
<div class="summary description">
This class provides the ability to create a Drop Target.
</div>
<div class="section constructor details">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong>Drop</strong>
<code>
(
)
</code>
<div class="description">
</div>
</div>
</div>
</div>
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="private">
<h4><a name="property__groups">_groups</a>
<code>- private Array</code>
</h4>
<div class="detail">
<div class="description">
The groups this target belongs to.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__valid">_valid</a>
<code>- private Boolean</code>
</h4>
<div class="detail">
<div class="description">
Flag for determining if the target is valid in this operation.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_overTarget">overTarget</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
This flag is tripped when a drag element is over this target.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_region">region</a>
<code>- Object</code>
</h4>
<div class="detail">
<div class="description">
A region object associated with this target, used for checking regions while dragging.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_shim">shim</a>
<code>- {Object}</code>
</h4>
<div class="detail">
<div class="description">
Node reference to the targets shim
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
</code>
</div>
</div>
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="private">
<h4>
<a name="method__activateShim">_activateShim</a></h4>
<div class="detail">
<code>
private
void
<strong>_activateShim</strong>
(
)
</code>
<div class="description">
Activates the shim and adds some interaction CSS classes
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__createEvents">_createEvents</a></h4>
<div class="detail">
<code>
private
void
<strong>_createEvents</strong>
(
)
</code>
<div class="description">
This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__createShim">_createShim</a></h4>
<div class="detail">
<code>
private
void
<strong>_createShim</strong>
(
)
</code>
<div class="description">
Creates the Target shim and adds it to the DDM's playground..
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__deactivateShim">_deactivateShim</a></h4>
<div class="detail">
<code>
private
void
<strong>_deactivateShim</strong>
(
)
</code>
<div class="description">
Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__handleOut">_handleOut</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleOut</strong>
(
)
</code>
<div class="description">
Handles the mouseout DOM event on the Target Shim
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__handleOverEvent">_handleOverEvent</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleOverEvent</strong>
(
)
</code>
<div class="description">
Handles the mouseover DOM event on the Target Shim
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method__handleOverTarget">_handleOverTarget</a></h4>
<div class="detail">
<code>
private
void
<strong>_handleOverTarget</strong>
(
)
</code>
<div class="description">
This handles the over target call made from this object or from the DDM
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_destructor">destructor</a></h4>
<div class="detail">
<code>
private
void
<strong>destructor</strong>
(
)
</code>
<div class="description">
Lifecycle destructor, unreg the drag from the DDM and remove listeners
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_inGroup">inGroup</a></h4>
<div class="detail">
<code>
void
<strong>inGroup</strong>
(
groups
)
</code>
<div class="description">
Check if this target is in one of the supplied groups.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>groups <Array></code>
The groups to check against
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd>Boolean</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_initializer">initializer</a></h4>
<div class="detail">
<code>
private
void
<strong>initializer</strong>
(
)
</code>
<div class="description">
Private lifecycle method
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_sizeShim">sizeShim</a></h4>
<div class="detail">
<code>
void
<strong>sizeShim</strong>
(
)
</code>
<div class="description">
Positions and sizes the shim with the raw data from the node, this can be used to programatically adjust the Targets shim for Animation..
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="private" href="Attribute.html#method__cloneAttVal">_cloneAttVal</a><span class="private">,</span> <a class="private" href="Attribute.html#method__defAttSet">_defAttSet</a><span class="private">,</span> <a class="private" href="Attribute.html#method__fireAttChange">_fireAttChange</a><span class="private">,</span> <a class="private" href="Attribute.html#method__getSubAttVal">_getSubAttVal</a><span class="private">,</span> <a class="protected" href="Attribute.html#method__initAtts">_initAtts</a><span class="protected">,</span> <a class="private" href="Attribute.html#method__initAttVal">_initAttVal</a><span class="private">,</span> <a class="private" href="Attribute.html#method__setSubAttVal">_setSubAttVal</a><span class="private">,</span> <a class="private" href="Attribute.html#method__splitAttrValues">_splitAttrValues</a><span class="private">,</span> <a class="" href="Attribute.html#method_addAtt">addAtt</a><span class="">,</span> <a class="" href="Attribute.html#method_get">get</a><span class="">,</span> <a class="" href="Attribute.html#method_getAtts">getAtts</a><span class="">,</span> <a class="" href="Attribute.html#method_on">on</a><span class="">,</span> <a class="" href="Attribute.html#method_removeAtt">removeAtt</a><span class="">,</span> <a class="" href="Attribute.html#method_set">set</a><span class="">,</span> <a class="" href="Attribute.html#method_setAtts">setAtts</a>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="protected" href="Base.html#method__defDestroyFn">_defDestroyFn</a><span class="protected">,</span> <a class="protected" href="Base.html#method__defInitFn">_defInitFn</a><span class="protected">,</span> <a class="private" href="Base.html#method__destroyHierarchy">_destroyHierarchy</a><span class="private">,</span> <a class="protected" href="Base.html#method__getClasses">_getClasses</a><span class="protected">,</span> <a class="private" href="Base.html#method__initHierarchy">_initHierarchy</a><span class="private">,</span> <a class="private" href="Base.html#method__prefixEvtType">_prefixEvtType</a><span class="private">,</span> <a class="" href="Base.html#method_after">after</a><span class="">,</span> <a class="" href="Base.html#method_destroy">destroy</a><span class="">,</span> <a class="" href="Base.html#method_fire">fire</a><span class="">,</span> <a class="" href="Base.html#method_init">init</a><span class="">,</span> <a class="" href="Base.html#method_publish">publish</a><span class="">,</span> <a class="" href="Base.html#method_subscribe">subscribe</a><span class="">,</span> <a class="" href="Base.html#method_toString">toString</a><span class="">,</span> <a class="" href="Base.html#method_unsubscribe">unsubscribe</a><span class="">,</span> <a class="" href="Base.html#method_unsubscribeAll">unsubscribeAll</a>
</code>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Event.Target.html#method_addTarget">addTarget</a><span class="">,</span> <a class="" href="Event.Target.html#method_after">after</a><span class="">,</span> <a class="" href="Event.Target.html#method_bubble">bubble</a><span class="">,</span> <a class="" href="Event.Target.html#method_fire">fire</a><span class="">,</span> <a class="" href="Event.Target.html#method_getEvent">getEvent</a><span class="">,</span> <a class="" href="Event.Target.html#method_publish">publish</a><span class="">,</span> <a class="" href="Event.Target.html#method_ready">ready</a><span class="">,</span> <a class="" href="Event.Target.html#method_removeTarget">removeTarget</a><span class="">,</span> <a class="" href="Event.Target.html#method_subscribe">subscribe</a><span class="">,</span> <a class="" href="Event.Target.html#method_unsubscribe">unsubscribe</a><span class="">,</span> <a class="" href="Event.Target.html#method_unsubscribeAll">unsubscribeAll</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="events">Events</h3>
<div class="content">
<div class="">
<h4>
<a name="event_drop:enter">drop:enter</a></h4>
<div class="detail">
<code>
<strong>drop:enter</strong>
(
)
</code>
<div class="description">
Fires when a drag element enters this target.
</div>
<div class="description">
<div class="bubbles">
</div>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_drop:exit">drop:exit</a></h4>
<div class="detail">
<code>
<strong>drop:exit</strong>
(
)
</code>
<div class="description">
Fires when a drag element exits this target.
</div>
<div class="description">
<div class="bubbles">
</div>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_drop:hit">drop:hit</a></h4>
<div class="detail">
<code>
<strong>drop:hit</strong>
(
)
</code>
<div class="description">
Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)
</div>
<div class="description">
<div class="bubbles">
</div>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_drop:over">drop:over</a></h4>
<div class="detail">
<code>
<strong>drop:over</strong>
(
)
</code>
<div class="description">
Fires when a drag element is over this target.
</div>
<div class="description">
<div class="bubbles">
</div>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_groupsChange">groupsChange</a></h4>
<div class="detail">
<code>
<strong>groupsChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'groups' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_lockChange">lockChange</a></h4>
<div class="detail">
<code>
<strong>lockChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'lock' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_nodeChange">nodeChange</a></h4>
<div class="detail">
<code>
<strong>nodeChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'node' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_paddingChange">paddingChange</a></h4>
<div class="detail">
<code>
<strong>paddingChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'padding' is changed. You can listen for the event using the <a href="Attribute.html#method_on>on</a> method if you wish to be notified before the attribute's value has changed, or using the <a href="Event.Target.html#method_after>after</a> method if you wish to be notified after the attribute's value has changed.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
An Event Facade object with the following attribute specific properties added: <dl> <dt>prevVal</dt> <dd>The value of the attribute, prior to it being set</dd> <dt>newVal</dt> <dd>The value the attribute is to be set to</dd> <dt>attrName</dt> <dd>The name of the attribute being set</dd> <dt>subAttrName</dt> <dd>If setting a property within the attribute's value, the name of the sub-attribute property being set</dd> </dl>
</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Base.html#event_destroy">destroy</a><span class="">,</span> <a class="" href="Base.html#event_destroyedChange">destroyedChange</a><span class="">,</span> <a class="" href="Base.html#event_init">init</a><span class="">,</span> <a class="" href="Base.html#event_initializedChange">initializedChange</a><span class="">,</span>
</code>
</div>
</div>
<div class="section field details">
<h3 id="configattributes">Configuration Attributes</h3>
<div class="content">
<div class="">
<h4><a name="config_groups">groups</a>
<code>- Array</code>
</h4>
<div class="detail">
<div class="description">
Array of groups to add this drop into.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_lock">lock</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Set to lock this drop element.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_node">node</a>
<code>- Node</code>
</h4>
<div class="detail">
<div class="description">
Y.Node instanace to use as the element to make a Drop Target
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_padding">padding</a>
<code>- String</code>
</h4>
<div class="detail">
<div class="description">
CSS style padding to make the Drop Target bigger than the node.
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<div class="content">
<code>
<a class="" href="Base.html#config_destroyed">destroyed</a><span class="">,</span> <a class="" href="Base.html#config_initialized">initialized</a><span class="">,</span>
</code>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div class="module">
<h4>Modules</h4>
<ul class="content">
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
</ul>
</div>
<div class="module">
<h4>Properties</h4>
<ul class="content">
<li class="private"><a href="#property__groups">_groups</a>
<!--<code><{Object}></code>-->
</li>
<li class="private"><a href="#property__valid">_valid</a>
<!--<code><{Object}></code>-->
</li>
<li class=""><a href="#property_overTarget">overTarget</a>
<!--<code><{Object}></code>-->
</li>
<li class=""><a href="#property_region">region</a>
<!--<code><{Object}></code>-->
</li>
<li class=""><a href="#property_shim">shim</a>
<!--<code><{Object}></code>-->
</li>
</ul>
</div>
<div class="module">
<h4>Methods</h4>
<ul class="content">
<li class="private"><!--<code>void</code>-->
<a href="#method__activateShim">_activateShim</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__createEvents">_createEvents</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__createShim">_createShim</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__deactivateShim">_deactivateShim</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__handleOut">_handleOut</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__handleOverEvent">_handleOverEvent</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method__handleOverTarget">_handleOverTarget</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_destructor">destructor</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_inGroup">inGroup</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_initializer">initializer</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_sizeShim">sizeShim</a>
</li>
</ul>
</div>
<div class="module">
<h4>Events</h4>
<ul class="content">
<li class="">
<a href="#event_drop:enter">drop:enter</a>
</li>
<li class="">
<a href="#event_drop:exit">drop:exit</a>
</li>
<li class="">
<a href="#event_drop:hit">drop:hit</a>
</li>
<li class="">
<a href="#event_drop:over">drop:over</a>
</li>
<li class="">
<a href="#event_groupsChange">groupsChange</a>
</li>
<li class="">
<a href="#event_lockChange">lockChange</a>
</li>
<li class="">
<a href="#event_nodeChange">nodeChange</a>
</li>
<li class="">
<a href="#event_paddingChange">paddingChange</a>
</li>
</ul>
</div>
<div class="module">
<h4>Configuration Attributes</h4>
<ul class="content">
<li class="">
<a href="#config_groups">groups</a>
</li>
<li class="">
<a href="#config_lock">lock</a>
</li>
<li class="">
<a href="#config_node">node</a>
</li>
<li class="">
<a href="#config_padding">padding</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright © 2008 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>