c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * The class allows you to create a Drag & Drop reordered list.
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @module sortable
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * The class allows you to create a Drag & Drop reordered list.
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @class Sortable
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @extends Base
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @constructor
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass Sortable.superclass.constructor.apply(this, arguments);
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @property delegate
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @type DD.Delegate
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description A reference to the DD.Delegate instance.
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass initializer: function() {
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass }).on('drop:over', Y.bind(this._onDropOver, this));
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass _onDrag: function(e) {
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass this._up = true;
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass this._up = false;
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _onDropOver
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @param Event e The Event Object
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description Handles the DropOver event to append a drop node to an empty target
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass _onDropOver: function(e) {
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass var nodes = e.drop.get(NODE).all(this.get(NODES));
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _onDragOver
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @param Event e The Event Object
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description Handles the DragOver event that moves the object in the list or to another list.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass _onDragOver: function(e) {
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass // is drop a child of drag?
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass if (e.drag.get(NODE).contains(e.drop.get(NODE))) {
3c1f57367a70c18f1f02cc622c22ab28291f9da6Dav Glass var same = false, dir, oldNode, newNode, dropsort, dropNode,
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass if (e.drag.get(NODE).get(PARENT_NODE).contains(e.drop.get(NODE))) {
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass case 'insert':
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass case 'swap':
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass case 'move':
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass case 'copy':
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass dropsort = Y.Sortable.getSortable(e.drop.get(NODE).get(PARENT_NODE));
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass Y.log('No delegate parent found', 'error', 'sortable');
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass Y.DD.DDM.getDrop(e.drag.get(NODE)).addToGroup(dropsort.get(ID));
aada64eeda56812aa838f53d155051fcb038ee36Dav Glass dropsort.delegate.createDrop(newNode, [dropsort.get(ID)]);
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass e.drop.get(NODE).insert(e.drag.get(NODE), 'before');
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass this.fire(moveType, { same: same, drag: e.drag, drop: e.drop });
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass this.fire('moved', { same: same, drag: e.drag, drop: e.drop });
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _onDragStart
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @param Event e The Event Object
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description Handles the DragStart event and initializes some settings.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass _onDragStart: function(e) {
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass this.delegate.get('lastNode').setStyle(ZINDEX, '');
5846d1e546877b451d3d7cace12f280705b8be28Dav Glass this.delegate.get(this.get(OPACITY_NODE)).setStyle(OPACITY, this.get(OPACITY));
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass this.delegate.get(CURRENT_NODE).setStyle(ZINDEX, '999');
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _onDragEnd
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @param Event e The Event Object
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description Handles the DragEnd event that cleans up the settings in the drag:start event.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass _onDragEnd: function(e) {
79768504cfa253883b609dc616353cf9baa014e8Dav Glass this.delegate.get(this.get(OPACITY_NODE)).setStyle(OPACITY, 1);
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @method plug
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @param Class cls The class to plug
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @param Object config The class config
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description Passthrough to the DD.Delegate.ddplug method
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @chainable
ba0fe1b081a3671cbb693768753da06feb76283eDav Glass //I don't like this.. Not at all, need to discuss with the team
db906d7a12cac5da21b0a5dea2a9fc1776d61de8Dav Glass if (cls && cls.NAME.substring(0, 4).toLowerCase() === 'sort') {
ba0fe1b081a3671cbb693768753da06feb76283eDav Glass this.constructor.superclass.plug.call(this, cls, config);
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass return this;
43075fdb133b6b5ad59fd62cee3a528c7c0a48b7Simon Højberg * @method sync
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description Passthrough to the DD.Delegate syncTargets method.
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @chainable
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass sync: function() {
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass return this;
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass destructor: function() {
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @method join
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @param Sortable sel The Sortable list to join with
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @param String type The type of join to do: full, inner, outer, none. Default: full
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @description Join this Sortable with another Sortable instance.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * <li>full: Exchange nodes with both lists.</li>
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * <li>inner: Items can go into this list from the joined list.</li>
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * <li>outer: Items can go out of the joined list into this list.</li>
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * <li>none: Removes the join.</li>
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass * @chainable
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass Y.error('Sortable: join needs a Sortable Instance');
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass return this;
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass if (this[method]) {
2770b9f7c21ef64710a10aad568befca6ca304c7Dav Glass return this;
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _join_none
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @param Sortable sel The Sortable to remove the join from
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description Removes the join with the passed Sortable.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _join_full
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @param Sortable sel The Sortable list to join with
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description Joins both of the Sortables together.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _join_outer
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @param Sortable sel The Sortable list to join with
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description Allows this Sortable to accept items from the passed Sortable.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method _join_inner
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @param Sortable sel The Sortable list to join with
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description Allows this Sortable to give items to the passed Sortable.
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * 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.
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @method getOrdering
c7fa4030715f5534907d3b5243ff1157e3a7b5fdDav Glass * @param Function callback
4b87f7a42e99324ab9ad79a6560d4f549aa31e1bDav Glass * @return Array
bf6f0bb5b4d34e0ff9fd6daa0aace77aa3a04240Dav Glass Y.one(this.get(CONT)).all(this.get(NODES)).each(function(node) {
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass * @attribute handles
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass * @description Drag handles to pass on to the internal DD.Delegate instance.
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass * @type Array
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @attribute container
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description A selector query to get the container to listen for mousedown events on. All "nodes" should be a child of this container.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type String
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @attribute nodes
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description A selector query to get the children of the "container" to make draggable elements from.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type String
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @attribute opacity
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @description The opacity to change the proxy item to when dragging.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type String
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @attribute opacityNode
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description The node to set opacity on when dragging (dragNode or currentNode). Default: currentNode.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type String
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @attribute id
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @description The id of this Sortable, used to get a reference to this Sortable list from another list.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type String
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @attribute moveType
c1b862fdf44ec940c8396d917e5b20716a8e5cffDav Glass * @description How should an item move to another list: insert, swap, move, copy. Default: insert
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type String
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @attribute invalid
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description A selector string to test if a list item is invalid and not sortable
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type String
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @property _sortables
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @type Array
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description Hash map of all Sortables on the page.
bf6f0bb5b4d34e0ff9fd6daa0aace77aa3a04240Dav Glass * @method _test
bf6f0bb5b4d34e0ff9fd6daa0aace77aa3a04240Dav Glass * @param {Node} node The node instance to test.
bf6f0bb5b4d34e0ff9fd6daa0aace77aa3a04240Dav Glass * @param {String|Node} test The node instance or selector string to test against.
bf6f0bb5b4d34e0ff9fd6daa0aace77aa3a04240Dav Glass * @description Test a Node or a selector for the container
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method getSortable
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @param {String|Node} node The node instance or selector string to use to find a Sortable instance.
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @description Get a Sortable instance back from a node reference or a selector string.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass var s = null;
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method reg
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @param Sortable s A Sortable instance.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description Register a Sortable instance with the singleton to allow lookups later.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass reg: function(s) {
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @method unreg
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @param Sortable s A Sortable instance.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass * @description Unregister a Sortable instance with the singleton.
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass unreg: function(s) {
c651fd5bce1f51c1216b07d8f62327a980804cf3Dav Glass if (v === s) {
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @event copy
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @description A Sortable node was moved with a copy.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {Event.Facade} event An Event Facade object
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {Boolean} event.same Moved to the same list.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drag} event.drag The drag instance.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drop} event.drop The drop instance.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @type {Event.Custom}
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @event move
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @description A Sortable node was moved with a move.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @param {Event.Facade} event An Event Facade object with the following specific property added:
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {Boolean} event.same Moved to the same list.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drag} event.drag The drag instance.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drop} event.drop The drop instance.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @type {Event.Custom}
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @event insert
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @description A Sortable node was moved with an insert.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @param {Event.Facade} event An Event Facade object with the following specific property added:
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {Boolean} event.same Moved to the same list.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drag} event.drag The drag instance.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drop} event.drop The drop instance.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @type {Event.Custom}
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @event swap
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @description A Sortable node was moved with a swap.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @param {Event.Facade} event An Event Facade object with the following specific property added:
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {Boolean} event.same Moved to the same list.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drag} event.drag The drag instance.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drop} event.drop The drop instance.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @type {Event.Custom}
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @event moved
99de059e322e18c5e94979ccb1789660ea5621f7Dav Glass * @description A Sortable node was moved.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @param {Event.Facade} event An Event Facade object with the following specific property added:
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {Boolean} event.same Moved to the same list.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drag} event.drag The drag instance.
063ddf3bc312da28192cfc1b76b2103edbb5e9bbDav Glass * @param {DD.Drop} event.drop The drop instance.
e78fbe7aa08b3b7d59d1b68ce09a20e442893082Dav Glass * @type {Event.Custom}