# Yahoo! UI Library

### sortable 3.3.0

Yahoo! UI Library > sortable > Plugin.Sortable
Search:
Filters Show Private Show Protected Show Deprecated

## Class Plugin.Sortable - extends Base

The class allows you to create a Drag & Drop reordered list.

### Constructor

Plugin.Sortable `( )`

### Properties

#### _sortables - `private static Array`

Hash map of all Sortables on the page.

#### delegate - `DD.Delegate`

A reference to the DD.Delegate instance.

#### Properties inherited from Plugin.Host:

`PluginHost`

#### Properties inherited from Attribute:

``

#### Properties inherited from Base:

`name`

### Methods

#### _join_full

`private void _join_full ( Sortable )`
Joins both of the Sortables together.

Parameters:
  `Sortable <object>` sel The Sortable list to join with

#### _join_inner

`private void _join_inner ( Sortable )`
Allows this Sortable to give items to the passed Sortable.

Parameters:
  `Sortable <object>` sel The Sortable list to join with

#### _join_none

`private void _join_none ( Sortable )`
Removes the join with the passed Sortable.

Parameters:
  `Sortable <object>` sel The Sortable to remove the join from

#### _join_outer

`private void _join_outer ( Sortable )`
Allows this Sortable to accept items from the passed Sortable.

Parameters:
  `Sortable <object>` sel The Sortable list to join with

#### _onDragEnd

`private void _onDragEnd ( Event )`
Handles the DragEnd event that cleans up the settings in the drag:start event.

Parameters:
  `Event <object>` e The Event Object

#### _onDragOver

`private void _onDragOver ( Event )`
Handles the DragOver event that moves the object in the list or to another list.

Parameters:
  `Event <object>` e The Event Object

#### _onDragStart

`private void _onDragStart ( Event )`
Handles the DragStart event and initializes some settings.

Parameters:
  `Event <object>` e The Event Object

#### _onDropOver

`private void _onDropOver ( Event )`
Handles the DropOver event to append a drop node to an empty target

Parameters:
  `Event <object>` e The Event Object

#### _test

`static void _test ( node , test )`
Test a Node or a selector for the container

Parameters:
  `node <Node>` The node instance to test.
  `test <String|Node>` The node instance or selector string to test against.

#### getOrdering

`void getOrdering ( Function )`
A custom callback to allow a user to extract some sort of id or any other data from the node to use in the "ordering list" and then that data should be returned from the callback.

Parameters:
  `Function <object>` callback

#### getSortable

`static void getSortable ( node )`
Get a Sortable instance back from a node reference or a selector string.

Parameters:
  `node <String|Node>` The node instance or selector string to use to find a Sortable instance.

#### join

`void join ( Sortable , String )`
Join this Sortable with another Sortable instance.

- full: Exchange nodes with both lists.
- inner: Items can go into this list from the joined list.
- outer: Items can go out of the joined list into this list.
- none: Removes the join.

Parameters:
  `Sortable <object>` sel The Sortable list to join with
  `String <object>` type The type of join to do: full, inner, outer, none. Default: full

Chainable: This method is chainable.

#### plug

`void plug ( Class , Object )`
Passthrough to the DD.Delegate.ddplug method

Parameters:
  `Class <object>` cls The class to plug
  `Object <object>` config The class config

Chainable: This method is chainable.

#### reg

`static void reg ( Sortable )`
Register a Sortable instance with the singleton to allow lookups later.

Parameters:
  `Sortable <object>` s A Sortable instance.

#### unreg

`static void unreg ( Sortable )`
Unregister a Sortable instance with the singleton.

Parameters:
  `Sortable <object>` s A Sortable instance.

#### Methods inherited from EventTarget:

`_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, parseType, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrCfg, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs`

#### Methods inherited from Plugin.Host:

`_destroyPlugins, _initPlugins, hasPlugin, plug, unplug`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString`

### Events

#### containerChange

`containerChange ( event )`
Fires when the value for the configuration attribute 'container' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### copy

`copy ( event )`
A Sortable node was moved.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following specific property added:
  same
    Moved to the same list.
  drag
    The Drag Object
  drop
    The Drop Object
  `event <Event.Facade>` An Event Facade object with the following specific property added:
  same
    Moved to the same list.
  drag
    The Drag Object
  drop
    The Drop Object
  `event <Event.Facade>` An Event Facade object with the following specific property added:
  same
    Moved to the same list.
  drag
    The Drag Object
  drop
    The Drop Object
  `event <Event.Facade>` An Event Facade object with the following specific property added:
  same
    Moved to the same list.
  drag
    The Drag Object
  drop
    The Drop Object
  `event <Event.Facade>` An Event Facade object with the following specific property added:
  same
    Moved to the same list.
  drag
    The Drag Object
  drop
    The Drop Object

#### handlesChange

`handlesChange ( event )`
Fires when the value for the configuration attribute 'handles' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### idChange

`idChange ( event )`
Fires when the value for the configuration attribute 'id' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### invalidChange

`invalidChange ( event )`
Fires when the value for the configuration attribute 'invalid' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### moveTypeChange

`moveTypeChange ( event )`
Fires when the value for the configuration attribute 'moveType' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### nodesChange

`nodesChange ( event )`
Fires when the value for the configuration attribute 'nodes' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### opacityChange

`opacityChange ( event )`
Fires when the value for the configuration attribute 'opacity' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### opacityNodeChange

`opacityNodeChange ( event )`
Fires when the value for the configuration attribute 'opacityNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### Events inherited from Base:

`destroy, destroyedChange, init, initializedChange,`

### Configuration Attributes

#### container `- String`

A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.

#### handles `- Array`

Drag handles to pass on to the internal DD.Delegate instance.

#### id `- String`

The id of this Sortable, used to get a reference to this Sortable list from another list.

#### invalid `- String`

A selector string to test if a list item is invalid and not sortable

#### moveType `- String`

How should an item move to another list: insert, swap, move, copy. Default: insert

#### nodes `- String`

A selector query to get the children of the "container" to make draggable elements from.

#### opacity `- String`

The opacity to change the proxy item to when dragging.

#### opacityNode `- String`

The node to set opacity on when dragging (dragNode or currentNode). Default: currentNode.

#### Configuration attributes inherited from Base:

`destroyed initialized`

Copyright © 2011 Yahoo! Inc. All rights reserved.