Sortable.html revision 0aa201e7fd52c873302e5b545219065d90bbfd1e
<head>
<title>API: sortable Sortable (YUI Library)</title>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<h3>sortable <span class="subtitle">3.1.0</span></h3>
> Sortable
<form onsubmit="return false">
<div id="propertysearch">
Search: <input autocomplete="off" id="searchinput" />
<div id="searchresults">
</div>
</div>
</form>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form">
<fieldset>
<legend>Filters</legend>
<span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span>
<span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span>
<span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span>
</fieldset>
</form>
<h2>
Class <b property="yui:name">Sortable</b>
<span class="extends">
</span>
</h2>
<!-- class tree goes here -->
<div class="summary description" property="yui:description">
The class allows you to create a Drag & Drop reordered list.
</div>
<div class="section constructor details" rel="yui:constructor" resource="#constructor">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong property="yui:name">Sortable</strong>
<code>
(
)
</code>
<div class="description">
</div>
</div>
</div>
</div>
<div rel="yui:properties" resource="#properties">
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="private" rel="yui:property" resource="#property__sortables">
<h4><a name="property__sortables" property="yui:name">_sortables</a>
- <code>private static <span property="yui:type">Array</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
Hash map of all Sortables on the page.
</div>
</div>
<hr />
</div>
<div class="" rel="yui:property" resource="#property_delegate">
<h4><a name="property_delegate" property="yui:name">delegate</a>
</h4>
<div class="detail">
<div class="description" property="yui:description">
A reference to the DD.Delegate instance.
</div>
</div>
<hr />
</div>
</div>
</div>
<div rel="yui:inheritance">
<h4>Properties inherited from <a href="Attribute.html" property="yui:name" title="Attribute">Attribute</a>:</h4>
<div class="content" rel="yui:properties">
<code>
</code>
</div>
</div>
<div class="content" rel="yui:properties">
<code>
</span>
</code>
</div>
</div>
</div>
</div>
<div rel="yui:methods" resource="#methods">
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="private" rel="yui:method" resource="#method__join_full">
<h4>
<a name="method__join_full">_join_full</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_join_full</strong>
(
Sortable
)
</code>
<div class="description" property="yui:description">
Joins both of the Sortables together.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Sortable</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> sel The sortable list to join with</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private" rel="yui:method" resource="#method__join_inner">
<h4>
<a name="method__join_inner">_join_inner</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_join_inner</strong>
(
Sortable
)
</code>
<div class="description" property="yui:description">
Allows this Sortable to give items to the passed Sortable.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Sortable</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> sel The sortable list to join with</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private" rel="yui:method" resource="#method__join_none">
<h4>
<a name="method__join_none">_join_none</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_join_none</strong>
(
Sortable
)
</code>
<div class="description" property="yui:description">
Removes the join with the passed Sortable.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Sortable</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> sel The Sortable to remove the join from</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private" rel="yui:method" resource="#method__join_outer">
<h4>
<a name="method__join_outer">_join_outer</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_join_outer</strong>
(
Sortable
)
</code>
<div class="description" property="yui:description">
Allows this Sortable to accept items from the passed Sortable.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Sortable</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> sel The sortable list to join with</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private" rel="yui:method" resource="#method__onDragEnd">
<h4>
<a name="method__onDragEnd">_onDragEnd</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_onDragEnd</strong>
(
Event
)
</code>
<div class="description" property="yui:description">
Handles the DragEnd event that cleans up the settings in the drag:start event.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Event</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> e The Event Object</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private" rel="yui:method" resource="#method__onDragOver">
<h4>
<a name="method__onDragOver">_onDragOver</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_onDragOver</strong>
(
Event
)
</code>
<div class="description" property="yui:description">
Handles the DragOver event that moves the object in the list or to another list.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Event</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> e The Event Object</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private" rel="yui:method" resource="#method__onDragStart">
<h4>
<a name="method__onDragStart">_onDragStart</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_onDragStart</strong>
(
Event
)
</code>
<div class="description" property="yui:description">
Handles the DragStart event and initializes some settings.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Event</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> e The Event Object</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private" rel="yui:method" resource="#method__onDropOver">
<h4>
<a name="method__onDropOver">_onDropOver</a></h4>
<div class="detail" >
<code>
private
void
<strong property="yui:name">_onDropOver</strong>
(
Event
)
</code>
<div class="description" property="yui:description">
Handles the DropOver event to append a drop node to an empty target
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Event</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> e The Event Object</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_getSortable">
<h4>
<a name="method_getSortable">getSortable</a></h4>
<div class="detail" >
<code>
static
void
<strong property="yui:name">getSortable</strong>
(
node
)
</code>
<div class="description" property="yui:description">
Get a sortable instance back from a node reference or a selector string.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">node</span>
<<span property="yui:type">String|Node</span>>
</code>
<span property="yui:description"> The node instance or selector string to use to find a Sortable instance.</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_join">
<h4>
<a name="method_join">join</a></h4>
<div class="detail" >
<code>
void
<strong property="yui:name">join</strong>
(
Sortable
,
String
)
</code>
<div class="description" property="yui:description">
Join this Sortable with another Sortable instance.
<ul>
<li>full: Exchange nodes with both lists.</li>
<li>inner: Items can go into this list from the joined list.</li>
<li>outer: Items can go out of the joined list into this list.</li>
<li>none: Removes the join.</li>
</ul>
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Sortable</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> sel The sortable list to join with</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">String</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> type The type of join to do: full, inner, outer, none. Default: full</span>
</dd>
</dl>
<div class="chainable">
<strong>Chainable:</strong> This method is chainable.
</div>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_plug">
<h4>
<a name="method_plug">plug</a></h4>
<div class="detail" >
<code>
void
<strong property="yui:name">plug</strong>
(
Class
,
Object
)
</code>
<div class="description" property="yui:description">
Passthrough to the DD.Delegate.ddplug method
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Class</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> cls The class to plug</span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">Object</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> config The class config</span>
</dd>
</dl>
<div class="chainable">
<strong>Chainable:</strong> This method is chainable.
</div>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_reg">
<h4>
<a name="method_reg">reg</a></h4>
<div class="detail" >
<code>
static
void
<strong property="yui:name">reg</strong>
(
Sortable
)
</code>
<div class="description" property="yui:description">
Register a Sortable instance with the singleton to allow lookups later.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Sortable</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> s A Sortable instance.</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:method" resource="#method_unreg">
<h4>
<a name="method_unreg">unreg</a></h4>
<div class="detail" >
<code>
static
void
<strong property="yui:name">unreg</strong>
(
Sortable
)
</code>
<div class="description" property="yui:description">
Unregister a Sortable instance with the singleton.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">Sortable</span>
<<span property="yui:type">object</span>>
</code>
<span property="yui:description"> s A Sortable instance.</span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div rel="yui:inheritance">
<h4>Methods inherited from <a href="EventTarget.html" property="yui:name" title="EventTarget">EventTarget</a>:</h4>
<div class="content" rel="yui:methods">
<code>
<a class="private" href="EventTarget.html#method__getType" property="yui:name" title="_getType">_getType</a><span class="private">,</span>
</span>
<a class="private" href="EventTarget.html#method__monitor" property="yui:name" title="_monitor">_monitor</a><span class="private">,</span>
</span>
<a class="private" href="EventTarget.html#method__parseType" property="yui:name" title="_parseType">_parseType</a><span class="private">,</span>
</span>
<a class="" href="EventTarget.html#method_addTarget" property="yui:name" title="addTarget">addTarget</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_after" property="yui:name" title="after">after</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_before" property="yui:name" title="before">before</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_bubble" property="yui:name" title="bubble">bubble</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_detach" property="yui:name" title="detach">detach</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_detachAll" property="yui:name" title="detachAll">detachAll</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_fire" property="yui:name" title="fire">fire</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_getEvent" property="yui:name" title="getEvent">getEvent</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_getTargets" property="yui:name" title="getTargets">getTargets</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_on" property="yui:name" title="on">on</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_once" property="yui:name" title="once">once</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_publish" property="yui:name" title="publish">publish</a><span class="">,</span>
</span>
<a class="" href="EventTarget.html#method_removeTarget" property="yui:name" title="removeTarget">removeTarget</a><span class="">,</span>
</span>
<a class=" deprecated" href="EventTarget.html#method_subscribe" property="yui:name" title="subscribe">subscribe</a><span class=" deprecated">,</span>
</span>
<a class=" deprecated" href="EventTarget.html#method_unsubscribe" property="yui:name" title="unsubscribe">unsubscribe</a><span class=" deprecated">,</span>
</span>
<a class=" deprecated" href="EventTarget.html#method_unsubscribeAll" property="yui:name" title="unsubscribeAll">unsubscribeAll</a>
</span>
</code>
</div>
</div>
<h4>Methods inherited from <a href="Attribute.html" property="yui:name" title="Attribute">Attribute</a>:</h4>
<div class="content" rel="yui:methods">
<code>
<a class="private" href="Attribute.html#method__addAttrs" property="yui:name" title="_addAttrs">_addAttrs</a><span class="private">,</span>
</span>
<a class="private" href="Attribute.html#method__addLazyAttr" property="yui:name" title="_addLazyAttr">_addLazyAttr</a><span class="private">,</span>
</span>
<a class="private" href="Attribute.html#method__defAttrChangeFn" property="yui:name" title="_defAttrChangeFn">_defAttrChangeFn</a><span class="private">,</span>
</span>
<a class="private" href="Attribute.html#method__fireAttrChange" property="yui:name" title="_fireAttrChange">_fireAttrChange</a><span class="private">,</span>
</span>
<a class="protected" href="Attribute.html#method__getAttr" property="yui:name" title="_getAttr">_getAttr</a><span class="protected">,</span>
</span>
<a class="private" href="Attribute.html#method__getAttrInitVal" property="yui:name" title="_getAttrInitVal">_getAttrInitVal</a><span class="private">,</span>
</span>
<a class="protected" href="Attribute.html#method__getAttrs" property="yui:name" title="_getAttrs">_getAttrs</a><span class="protected">,</span>
</span>
<a class="private" href="Attribute.html#method__getStateVal" property="yui:name" title="_getStateVal">_getStateVal</a><span class="private">,</span>
</span>
<a class="private" href="Attribute.html#method__isLazyAttr" property="yui:name" title="_isLazyAttr">_isLazyAttr</a><span class="private">,</span>
</span>
<a class="private" href="Attribute.html#method__normAttrVals" property="yui:name" title="_normAttrVals">_normAttrVals</a><span class="private">,</span>
</span>
<a class="protected" href="Attribute.html#method__protectAttrs" property="yui:name" title="_protectAttrs">_protectAttrs</a><span class="protected">,</span>
</span>
<a class="protected" href="Attribute.html#method__set" property="yui:name" title="_set">_set</a><span class="protected">,</span>
</span>
<a class="protected" href="Attribute.html#method__setAttr" property="yui:name" title="_setAttr">_setAttr</a><span class="protected">,</span>
</span>
<a class="protected" href="Attribute.html#method__setAttrs" property="yui:name" title="_setAttrs">_setAttrs</a><span class="protected">,</span>
</span>
<a class="private" href="Attribute.html#method__setAttrVal" property="yui:name" title="_setAttrVal">_setAttrVal</a><span class="private">,</span>
</span>
<a class="private" href="Attribute.html#method__setStateVal" property="yui:name" title="_setStateVal">_setStateVal</a><span class="private">,</span>
</span>
<a class="" href="Attribute.html#method_addAttr" property="yui:name" title="addAttr">addAttr</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_addAttrs" property="yui:name" title="addAttrs">addAttrs</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_attrAdded" property="yui:name" title="attrAdded">attrAdded</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_get" property="yui:name" title="get">get</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_getAttrs" property="yui:name" title="getAttrs">getAttrs</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_modifyAttr" property="yui:name" title="modifyAttr">modifyAttr</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_removeAttr" property="yui:name" title="removeAttr">removeAttr</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_reset" property="yui:name" title="reset">reset</a><span class="">,</span>
</span>
<a class="" href="Attribute.html#method_set" property="yui:name" title="set">set</a><span class="">,</span>
</span>
</span>
</code>
</div>
</div>
<h4>Methods inherited from <a href="Plugin.Host.html" property="yui:name" title="Plugin.Host">Plugin.Host</a>:</h4>
<div class="content" rel="yui:methods">
<code>
<a class="private" href="Plugin.Host.html#method__destroyPlugins" property="yui:name" title="_destroyPlugins">_destroyPlugins</a><span class="private">,</span>
</span>
<a class="private" href="Plugin.Host.html#method__initPlugins" property="yui:name" title="_initPlugins">_initPlugins</a><span class="private">,</span>
</span>
<a class="private" href="Plugin.Host.html#method__plug" property="yui:name" title="_plug">_plug</a><span class="private">,</span>
</span>
<a class="private" href="Plugin.Host.html#method__unplug" property="yui:name" title="_unplug">_unplug</a><span class="private">,</span>
</span>
<a class="" href="Plugin.Host.html#method_hasPlugin" property="yui:name" title="hasPlugin">hasPlugin</a><span class="">,</span>
</span>
<a class="" href="Plugin.Host.html#method_plug" property="yui:name" title="plug">plug</a><span class="">,</span>
</span>
</span>
</code>
</div>
</div>
<div class="content" rel="yui:methods">
<code>
<a class="private" href="Base.html#method__aggregateAttrs" property="yui:name" title="_aggregateAttrs">_aggregateAttrs</a><span class="private">,</span>
</span>
<a class="protected" href="Base.html#method__defDestroyFn" property="yui:name" title="_defDestroyFn">_defDestroyFn</a><span class="protected">,</span>
</span>
<a class="protected" href="Base.html#method__defInitFn" property="yui:name" title="_defInitFn">_defInitFn</a><span class="protected">,</span>
</span>
<a class="private" href="Base.html#method__destroyHierarchy" property="yui:name" title="_destroyHierarchy">_destroyHierarchy</a><span class="private">,</span>
</span>
<a class="private" href="Base.html#method__filterAttrCfs" property="yui:name" title="_filterAttrCfs">_filterAttrCfs</a><span class="private">,</span>
</span>
<a class="protected" href="Base.html#method__getAttrCfgs" property="yui:name" title="_getAttrCfgs">_getAttrCfgs</a><span class="protected">,</span>
</span>
<a class="protected" href="Base.html#method__getClasses" property="yui:name" title="_getClasses">_getClasses</a><span class="protected">,</span>
</span>
<a class="private" href="Base.html#method__initHierarchy" property="yui:name" title="_initHierarchy">_initHierarchy</a><span class="private">,</span>
</span>
<a class="private" href="Base.html#method__initHierarchyData" property="yui:name" title="_initHierarchyData">_initHierarchyData</a><span class="private">,</span>
</span>
<a class="" href="Base.html#method__preInitEventCfg" property="yui:name" title="_preInitEventCfg">_preInitEventCfg</a><span class="">,</span>
</span>
<a class="" href="Base.html#method_destroy" property="yui:name" title="destroy">destroy</a><span class="">,</span>
</span>
<a class="" href="Base.html#method_init" property="yui:name" title="init">init</a><span class="">,</span>
</span>
</span>
</code>
</div>
</div>
</div>
</div>
<div rel="yui:events" resource="#events">
<div class="section method details">
<h3 id="events">Events</h3>
<div class="content">
<div class="" rel="yui:event" resource="#event_containerChange">
<h4>
<a name="event_containerChange">containerChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">containerChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'container' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_copy">
<h4>
<a name="event_copy">copy</a></h4>
<div class="detail">
<code>
<strong property="yui:name">copy</strong>
(
event
)
</code>
<div class="description" property="yui:description">
A sortable node was moved.
</div>
<div class="description">
<dl rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description"> An Event Facade object with the following specific property added:
<dl>
<dt>same</dt><dd>Moved to the same list.</dd>
<dt>drag</dt><dd>The Drag Object</dd>
<dt>drop</dt><dd>The Drop Object</dd>
</dl></span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description"> An Event Facade object with the following specific property added:
<dl>
<dt>same</dt><dd>Moved to the same list.</dd>
<dt>drag</dt><dd>The Drag Object</dd>
<dt>drop</dt><dd>The Drop Object</dd>
</dl></span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description"> An Event Facade object with the following specific property added:
<dl>
<dt>same</dt><dd>Moved to the same list.</dd>
<dt>drag</dt><dd>The Drag Object</dd>
<dt>drop</dt><dd>The Drop Object</dd>
</dl></span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description"> An Event Facade object with the following specific property added:
<dl>
<dt>same</dt><dd>Moved to the same list.</dd>
<dt>drag</dt><dd>The Drag Object</dd>
<dt>drop</dt><dd>The Drop Object</dd>
</dl></span>
</dd>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description"> An Event Facade object with the following specific property added:
<dl>
<dt>same</dt><dd>Moved to the same list.</dd>
<dt>drag</dt><dd>The Drag Object</dd>
<dt>drop</dt><dd>The Drop Object</dd>
</dl></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_handlesChange">
<h4>
<a name="event_handlesChange">handlesChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">handlesChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'handles' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_idChange">
<h4>
<a name="event_idChange">idChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">idChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'id' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_invalidChange">
<h4>
<a name="event_invalidChange">invalidChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">invalidChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'invalid' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_moveTypeChange">
<h4>
<a name="event_moveTypeChange">moveTypeChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">moveTypeChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'moveType' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_nodesChange">
<h4>
<a name="event_nodesChange">nodesChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">nodesChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'nodes' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_opacityChange">
<h4>
<a name="event_opacityChange">opacityChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">opacityChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'opacity' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="" rel="yui:event" resource="#event_opacityNodeChange">
<h4>
<a name="event_opacityNodeChange">opacityNodeChange</a></h4>
<div class="detail">
<code>
<strong property="yui:name">opacityNodeChange</strong>
(
event
)
</code>
<div class="description" property="yui:description">
Fires when the value for the configuration attribute 'opacityNode' 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 rel="yui:parameters">
<dt>Parameters:</dt>
<dd rel="yui:parameter">
<code><span property="yui:name">event</span>
</code>
<span property="yui:description">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></span>
</dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div rel="yui:inheritance">
<div class="content" rel="yui:events">
<code>
<a class="" href="Base.html#event_destroy" property="yui:name" title="destroy">destroy</a><span class="">,</span>
</span>
<a class="" href="Base.html#event_destroyedChange" property="yui:name" title="destroyedChange">destroyedChange</a><span class="">,</span>
</span>
<a class="" href="Base.html#event_init" property="yui:name" title="init">init</a><span class="">,</span>
</span>
<a class="" href="Base.html#event_initializedChange" property="yui:name" title="initializedChange">initializedChange</a><span class="">,</span>
</span>
</code>
</div>
</div>
</div>
</div>
<div rel="yui:attributes" resource="#configattributes">
<div class="section field details">
<h3 id="configattributes">Configuration Attributes</h3>
<div class="content">
<div class="" rel="yui:attribute" resource="#config_container">
<h4><a name="config_container">container</a>
<code>- <span property="yui:type">String</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
</div>
</div>
<hr />
</div>
<div class="" rel="yui:attribute" resource="#config_handles">
<h4><a name="config_handles">handles</a>
<code>- <span property="yui:type">Array</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
Drag handles to pass on to the internal DD.Delegate instance.
</div>
</div>
<hr />
</div>
<div class="" rel="yui:attribute" resource="#config_id">
<h4><a name="config_id">id</a>
<code>- <span property="yui:type">String</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
The id of this sortable, used to get a reference to this sortable list from another list.
</div>
</div>
<hr />
</div>
<div class="" rel="yui:attribute" resource="#config_invalid">
<h4><a name="config_invalid">invalid</a>
<code>- <span property="yui:type">String</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
A selector string to test if a list item is invalid and not sortable
</div>
</div>
<hr />
</div>
<div class="" rel="yui:attribute" resource="#config_moveType">
<h4><a name="config_moveType">moveType</a>
<code>- <span property="yui:type">String</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
How should an item move to another list: insert, swap, move, copy. Default: insert
</div>
</div>
<hr />
</div>
<div class="" rel="yui:attribute" resource="#config_nodes">
<h4><a name="config_nodes">nodes</a>
<code>- <span property="yui:type">String</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
A selector query to get the children of the "container" to make draggable elements from.
</div>
</div>
<hr />
</div>
<div class="" rel="yui:attribute" resource="#config_opacity">
<h4><a name="config_opacity">opacity</a>
<code>- <span property="yui:type">String</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
The ocpacity to test the proxy item to when dragging.
</div>
</div>
<hr />
</div>
<div class="" rel="yui:attribute" resource="#config_opacityNode">
<h4><a name="config_opacityNode">opacityNode</a>
<code>- <span property="yui:type">String</span></code>
</h4>
<div class="detail">
<div class="description" property="yui:description">
The node to set opacity on when dragging (dragNode or currentNode). Default: currentNode.
</div>
</div>
<hr />
</div>
</div>
</div>
<div rel="yui:inheritance">
<h4>Configuration attributes inherited from <a href="Base.html" property="yui:name" title="Base">Base</a>:</h4>
<div class="content" rel="yui:attributes">
<code>
</span>
<a class="" href="Base.html#config_initialized" property="yui:name" title="initialized">initialized</a>
</span>
</code>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div id="moduleList" class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_classnamemanager.html" title="classnamemanager">classnamemanager</a></li>
<li class=""><a href="module_node-focusmanager.html" title="node-focusmanager">node-focusmanager</a></li>
<li class=""><a href="module_widget-position-align.html" title="widget-position-align">widget-position-align</a></li>
<li class=""><a href="module_widget-position-constrain.html" title="widget-position-constrain">widget-position-constrain</a></li>
</ul>
</div>
<div id="classList" class="module">
<h4>Classes</h4>
<ul class="content">
</ul>
</div>
<div id="fileList" class="module">
<h4>Files</h4>
<ul class="content">
</ul>
</div>
<div id="propertyList" class="module">
<h4>Properties</h4>
<ul class="content">
<li class="private"><a href="#property__sortables" title="_sortables">_sortables</a></li>
<li class=""><a href="#property_delegate" title="delegate">delegate</a></li>
</ul>
</div>
<div id="methodsList" class="module">
<h4>Methods</h4>
<ul class="content">
<li class="private"><a href="#method__join_full" title="_join_full">_join_full</a></li>
<li class="private"><a href="#method__join_inner" title="_join_inner">_join_inner</a></li>
<li class="private"><a href="#method__join_none" title="_join_none">_join_none</a></li>
<li class="private"><a href="#method__join_outer" title="_join_outer">_join_outer</a></li>
<li class="private"><a href="#method__onDragEnd" title="_onDragEnd">_onDragEnd</a></li>
<li class="private"><a href="#method__onDragOver" title="_onDragOver">_onDragOver</a></li>
<li class="private"><a href="#method__onDragStart" title="_onDragStart">_onDragStart</a></li>
<li class="private"><a href="#method__onDropOver" title="_onDropOver">_onDropOver</a></li>
<li class=""><a href="#method_getSortable" title="getSortable">getSortable</a></li>
<li class=""><a href="#method_join" title="join">join</a></li>
<li class=""><a href="#method_plug" title="plug">plug</a></li>
<li class=""><a href="#method_reg" title="reg">reg</a></li>
<li class=""><a href="#method_unreg" title="unreg">unreg</a></li>
</ul>
</div>
<div id="eventsList" class="module">
<h4>Events</h4>
<ul class="content">
<li class=""><a href="#event_containerChange" title="containerChange">containerChange</a></li>
<li class=""><a href="#event_copy" title="copy">copy</a></li>
<li class=""><a href="#event_handlesChange" title="handlesChange">handlesChange</a></li>
<li class=""><a href="#event_idChange" title="idChange">idChange</a></li>
<li class=""><a href="#event_invalidChange" title="invalidChange">invalidChange</a></li>
<li class=""><a href="#event_moveTypeChange" title="moveTypeChange">moveTypeChange</a></li>
<li class=""><a href="#event_nodesChange" title="nodesChange">nodesChange</a></li>
<li class=""><a href="#event_opacityChange" title="opacityChange">opacityChange</a></li>
<li class=""><a href="#event_opacityNodeChange" title="opacityNodeChange">opacityNodeChange</a></li>
</ul>
</div>
<div id="configList" class="module">
<h4>Configuration Attributes</h4>
<ul class="content">
<li class=""><a href="#config_container" title="container">container</a></li>
<li class=""><a href="#config_handles" title="handles">handles</a></li>
<li class=""><a href="#config_id" title="id">id</a></li>
<li class=""><a href="#config_invalid" title="invalid">invalid</a></li>
<li class=""><a href="#config_moveType" title="moveType">moveType</a></li>
<li class=""><a href="#config_nodes" title="nodes">nodes</a></li>
<li class=""><a href="#config_opacity" title="opacity">opacity</a></li>
<li class=""><a href="#config_opacityNode" title="opacityNode">opacityNode</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright © 2010 Yahoo! Inc. All rights reserved.
</div>
</div>
<script type="text/javascript">
var ALL_YUI_PROPS = [{"access": "", "host": "Sortable", "name": "container", "url": "Sortable.html#config_container", "type": "config"}, {"access": "", "host": "Sortable", "name": "containerChange", "url": "Sortable.html#event_containerChange", "type": "event"}, {"access": "", "host": "Sortable", "name": "copy", "url": "Sortable.html#event_copy", "type": "event"}, {"access": "", "host": "Sortable", "name": "delegate", "url": "Sortable.html#property_delegate", "type": "property"}, {"access": "", "host": "Sortable", "name": "getSortable", "url": "Sortable.html#method_getSortable", "type": "method"}, {"access": "", "host": "Sortable", "name": "handles", "url": "Sortable.html#config_handles", "type": "config"}, {"access": "", "host": "Sortable", "name": "handlesChange", "url": "Sortable.html#event_handlesChange", "type": "event"}, {"access": "", "host": "Sortable", "name": "id", "url": "Sortable.html#config_id", "type": "config"}, {"access": "", "host": "Sortable", "name": "idChange", "url": "Sortable.html#event_idChange", "type": "event"}, {"access": "", "host": "Sortable", "name": "invalid", "url": "Sortable.html#config_invalid", "type": "config"}, {"access": "", "host": "Sortable", "name": "invalidChange", "url": "Sortable.html#event_invalidChange", "type": "event"}, {"access": "", "host": "Sortable", "name": "join", "url": "Sortable.html#method_join", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_join_full", "url": "Sortable.html#method__join_full", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_join_inner", "url": "Sortable.html#method__join_inner", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_join_none", "url": "Sortable.html#method__join_none", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_join_outer", "url": "Sortable.html#method__join_outer", "type": "method"}, {"access": "", "host": "Sortable", "name": "moveType", "url": "Sortable.html#config_moveType", "type": "config"}, {"access": "", "host": "Sortable", "name": "moveTypeChange", "url": "Sortable.html#event_moveTypeChange", "type": "event"}, {"access": "", "host": "Sortable", "name": "nodes", "url": "Sortable.html#config_nodes", "type": "config"}, {"access": "", "host": "Sortable", "name": "nodesChange", "url": "Sortable.html#event_nodesChange", "type": "event"}, {"access": "private", "host": "Sortable", "name": "_onDragEnd", "url": "Sortable.html#method__onDragEnd", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_onDragOver", "url": "Sortable.html#method__onDragOver", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_onDragStart", "url": "Sortable.html#method__onDragStart", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_onDropOver", "url": "Sortable.html#method__onDropOver", "type": "method"}, {"access": "", "host": "Sortable", "name": "opacity", "url": "Sortable.html#config_opacity", "type": "config"}, {"access": "", "host": "Sortable", "name": "opacityChange", "url": "Sortable.html#event_opacityChange", "type": "event"}, {"access": "", "host": "Sortable", "name": "opacityNode", "url": "Sortable.html#config_opacityNode", "type": "config"}, {"access": "", "host": "Sortable", "name": "opacityNodeChange", "url": "Sortable.html#event_opacityNodeChange", "type": "event"}, {"access": "", "host": "Sortable", "name": "plug", "url": "Sortable.html#method_plug", "type": "method"}, {"access": "", "host": "Sortable", "name": "reg", "url": "Sortable.html#method_reg", "type": "method"}, {"access": "private", "host": "Sortable", "name": "_sortables", "url": "Sortable.html#property__sortables", "type": "property"}, {"access": "", "host": "Sortable", "name": "unreg", "url": "Sortable.html#method_unreg", "type": "method"}];
</script>
</body>
</html>