/**

* gridstack.js 1.1.1-dev

* https://gridstackjs.com/

* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov

* gridstack.js may be freely distributed under the MIT license.

* @preserve

*/

(function(factory) {

/* [alain] we compile jquery with our code, so no need to 'load' externally

if (typeof define === 'function' && define.amd) {

define(['jquery', 'exports'], factory);

} else if (typeof exports !== 'undefined') {

var jQueryModule;

try { jQueryModule = require('jquery'); } catch (e) {}

factory(jQueryModule || window.jQuery, exports);

} else */{

factory(window.jQuery, window);

}

})(function($, scope) {

// checks for obsolete method names

var obsolete = function(f, oldName, newName, rev) {

var wrapper = function() {

console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +

'with `' + newName + '`. It will be **completely** removed in v1.0');

return f.apply(this, arguments);

};

wrapper.prototype = f.prototype;

return wrapper;

};

// checks for obsolete grid options (can be used for any fields, but msg is about options)

var obsoleteOpts = function(opts, oldName, newName, rev) {

if (opts[oldName] !== undefined) {

opts[newName] = opts[oldName];

console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +

newName + '`. It will be **completely** removed in v1.0');

}

};

// checks for obsolete grid options which are gone

var obsoleteOptsDel = function(opts, oldName, rev, info) {

if (opts[oldName] !== undefined) {

console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);

}

};

// checks for obsolete Jquery element attributes

var obsoleteAttr = function(el, oldName, newName, rev) {

var oldAttr = el.attr(oldName);

if (oldAttr !== undefined) {

el.attr(newName, oldAttr);

console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +

newName + '`. It will be **completely** removed in v1.0');

}

};

var Utils = {

isIntercepted: function(a, b) {

return !(a.x + a.width <= b.x || b.x + b.width <= a.x || a.y + a.height <= b.y || b.y + b.height <= a.y);

},

sort: function(nodes, dir, column) {

if (!column) {

var widths = nodes.map(function(node) { return node.x + node.width; });

column = Math.max.apply(Math, widths);

}

if (dir === -1)

return Utils.sortBy(nodes, function(n) { return -(n.x + n.y * column); });

else

return Utils.sortBy(nodes, function(n) { return (n.x + n.y * column); });

},

createStylesheet: function(id, parent) {

var style = document.createElement('style');

style.setAttribute('type', 'text/css');

style.setAttribute('data-gs-style-id', id);

if (style.styleSheet) {

style.styleSheet.cssText = '';

} else {

style.appendChild(document.createTextNode(''));

}

if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head

parent.insertBefore(style, parent.firstChild);

return style.sheet;

},

removeStylesheet: function(id) {

$('STYLE[data-gs-style-id=' + id + ']').remove();

},

insertCSSRule: function(sheet, selector, rules, index) {

if (typeof sheet.insertRule === 'function') {

sheet.insertRule(selector + '{' + rules + '}', index);

} else if (typeof sheet.addRule === 'function') {

sheet.addRule(selector, rules, index);

}

},

toBool: function(v) {

if (typeof v === 'boolean') {

return v;

}

if (typeof v === 'string') {

v = v.toLowerCase();

return !(v === '' || v === 'no' || v === 'false' || v === '0');

}

return Boolean(v);

},

_collisionNodeCheck: function(n) {

return n !== this.node && Utils.isIntercepted(n, this.nn);

},

_didCollide: function(bn) {

return Utils.isIntercepted({x: this.n.x, y: this.newY, width: this.n.width, height: this.n.height}, bn);

},

_isAddNodeIntercepted: function(n) {

return Utils.isIntercepted({x: this.x, y: this.y, width: this.node.width, height: this.node.height}, n);

},

parseHeight: function(val) {

var height = val;

var heightUnit = 'px';

if (height && typeof height === 'string') {

var match = height.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/);

if (!match) {

throw new Error('Invalid height');

}

heightUnit = match[2] || 'px';

height = parseFloat(match[1]);

}

return {height: height, unit: heightUnit};

},

without: function(array, item) {

var index = array.indexOf(item);

if (index !== -1) {

array = array.slice(0);

array.splice(index, 1);

}

return array;

},

sortBy: function(array, getter) {

return array.slice(0).sort(function(left, right) {

var valueLeft = getter(left);

var valueRight = getter(right);

if (valueRight === valueLeft) {

return 0;

}

return valueLeft > valueRight ? 1 : -1;

});

},

defaults: function(target) {

var sources = Array.prototype.slice.call(arguments, 1);

sources.forEach(function(source) {

for (var prop in source) {

if (Object.prototype.hasOwnProperty.call(source, prop) && (!Object.prototype.hasOwnProperty.call(target, prop) || target[prop] === undefined)) {

target[prop] = source[prop];

}

}

});

return target;

},

clone: function(target) {

return $.extend({}, target);

},

throttle: function(callback, delay) {

var isWaiting = false;

return function() {

if (!isWaiting) {

callback.apply(this, arguments);

isWaiting = true;

setTimeout(function() { isWaiting = false; }, delay);

}

};

},

removePositioningStyles: function(el) {

var style = el[0].style;

if (style.position) {

style.removeProperty('position');

}

if (style.left) {

style.removeProperty('left');

}

if (style.top) {

style.removeProperty('top');

}

if (style.width) {

style.removeProperty('width');

}

if (style.height) {

style.removeProperty('height');

}

},

getScrollParent: function(el) {

var returnEl;

if (el === null) {

returnEl = null;

} else if (el.scrollHeight > el.clientHeight) {

returnEl = el;

} else {

returnEl = Utils.getScrollParent(el.parentNode);

}

return returnEl;

},

updateScrollPosition: function(el, ui, distance) {

// is widget in view?

var rect = el.getBoundingClientRect();

var innerHeightOrClientHeight = (window.innerHeight || document.documentElement.clientHeight);

if (rect.top < 0 ||

rect.bottom > innerHeightOrClientHeight

) {

// set scrollTop of first parent that scrolls

// if parent is larger than el, set as low as possible

// to get entire widget on screen

var offsetDiffDown = rect.bottom - innerHeightOrClientHeight;

var offsetDiffUp = rect.top;

var scrollEl = Utils.getScrollParent(el);

if (scrollEl !== null) {

var prevScroll = scrollEl.scrollTop;

if (rect.top < 0 && distance < 0) {

// moving up

if (el.offsetHeight > innerHeightOrClientHeight) {

scrollEl.scrollTop += distance;

} else {

scrollEl.scrollTop += Math.abs(offsetDiffUp) > Math.abs(distance) ? distance : offsetDiffUp;

}

} else if (distance > 0) {

// moving down

if (el.offsetHeight > innerHeightOrClientHeight) {

scrollEl.scrollTop += distance;

} else {

scrollEl.scrollTop += offsetDiffDown > distance ? distance : offsetDiffDown;

}

}

// move widget y by amount scrolled

ui.position.top += scrollEl.scrollTop - prevScroll;

}

}

}

};

/**

* @class GridStackDragDropPlugin

* Base class for drag'n'drop plugin.

*/

function GridStackDragDropPlugin(grid) {

this.grid = grid;

}

GridStackDragDropPlugin.registeredPlugins = [];

GridStackDragDropPlugin.registerPlugin = function(pluginClass) {

GridStackDragDropPlugin.registeredPlugins.push(pluginClass);

};

GridStackDragDropPlugin.prototype.resizable = function(el, opts) {

return this;

};

GridStackDragDropPlugin.prototype.draggable = function(el, opts) {

return this;

};

GridStackDragDropPlugin.prototype.droppable = function(el, opts) {

return this;

};

GridStackDragDropPlugin.prototype.isDroppable = function(el) {

return false;

};

GridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {

return this;

};

var idSeq = 0;

var GridStackEngine = function(column, onchange, float, maxRow, items) {

this.column = column || 12;

this.float = float || false;

this.maxRow = maxRow || 0;

this.nodes = items || [];

this.onchange = onchange || function() {};

this._addedNodes = [];

this._removedNodes = [];

this._batchMode = false;

};

GridStackEngine.prototype.batchUpdate = function() {

if (this._batchMode) return;

this._batchMode = true;

this._prevFloat = this.float;

this.float = true; // let things go anywhere for now... commit() will restore and possibly reposition

};

GridStackEngine.prototype.commit = function() {

if (!this._batchMode) return;

this._batchMode = false;

this.float = this._prevFloat;

delete this._prevFloat;

this._packNodes();

this._notify();

};

// For Meteor support: https://github.com/gridstack/gridstack.js/pull/272

GridStackEngine.prototype.getNodeDataByDOMEl = function(el) {

return this.nodes.find(function(node) { return el === node.el });

};

GridStackEngine.prototype._fixCollisions = function(node) {

var self = this;

this._sortNodes(-1);

var nn = node;

var hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));

if (!this.float && !hasLocked) {

nn = {x: 0, y: node.y, width: this.column, height: node.height};

}

while (true) {

var collisionNode = this.nodes.find(Utils._collisionNodeCheck, {node: node, nn: nn});

if (!collisionNode) { return; }

var moved;

if (collisionNode.locked) {

// if colliding with a locked item, move ourself instead

moved = this.moveNode(node, node.x, collisionNode.y + collisionNode.height,

node.width, node.height, true);

} else {

moved = this.moveNode(collisionNode, collisionNode.x, node.y + node.height,

collisionNode.width, collisionNode.height, true);

}

if (!moved) { return; } // break inf loop if we couldn't move after all (ex: maxRow, fixed)

}

};

GridStackEngine.prototype.isAreaEmpty = function(x, y, width, height) {

var nn = {x: x || 0, y: y || 0, width: width || 1, height: height || 1};

var collisionNode = this.nodes.find(function(n) {

return Utils.isIntercepted(n, nn);

});

return !collisionNode;

};

GridStackEngine.prototype._sortNodes = function(dir) {

this.nodes = Utils.sort(this.nodes, dir, this.column);

};

GridStackEngine.prototype._packNodes = function() {

this._sortNodes();

if (this.float) {

this.nodes.forEach(function(n, i) {

if (n._updating || n._packY === undefined || n.y === n._packY) {

return;

}

var newY = n.y;

while (newY >= n._packY) {

var collisionNode = this.nodes

.slice(0, i)

.find(Utils._didCollide, {n: n, newY: newY});

if (!collisionNode) {

n._dirty = true;

n.y = newY;

}

--newY;

}

}, this);

} else {

this.nodes.forEach(function(n, i) {

if (n.locked) { return; }

while (n.y > 0) {

var newY = n.y - 1;

var canBeMoved = i === 0;

if (i > 0) {

var collisionNode = this.nodes

.slice(0, i)

.find(Utils._didCollide, {n: n, newY: newY});

canBeMoved = collisionNode === undefined;

}

if (!canBeMoved) { break; }

// Note: must be dirty (from last position) for GridStack::OnChange CB to update positions

// and move items back. The user 'change' CB should detect changes from the original

// starting position instead.

n._dirty = (n.y !== newY);

n.y = newY;

}

}, this);

}

};

GridStackEngine.prototype._prepareNode = function(node, resizing) {

node = node || {};

// if we're missing position, have the grid position us automatically (before we set them to 0,0)

if (node.x === undefined || node.y === undefined || node.x === null || node.y === null) {

node.autoPosition = true;

}

// assign defaults for missing required fields

var defaults = {width: 1, height: 1, x: 0, y: 0};

node = Utils.defaults(node, defaults);

// convert any strings over

node.x = parseInt(node.x);

node.y = parseInt(node.y);

node.width = parseInt(node.width);

node.height = parseInt(node.height);

node.autoPosition = node.autoPosition || false;

node.noResize = node.noResize || false;

node.noMove = node.noMove || false;

// check for NaN (in case messed up strings were passed. can't do parseInt() || defaults.x above as 0 is valid #)

if (Number.isNaN(node.x)) { node.x = defaults.x; node.autoPosition = true; }

if (Number.isNaN(node.y)) { node.y = defaults.y; node.autoPosition = true; }

if (Number.isNaN(node.width)) { node.width = defaults.width; }

if (Number.isNaN(node.height)) { node.height = defaults.height; }

if (node.maxWidth !== undefined) { node.width = Math.min(node.width, node.maxWidth); }

if (node.maxHeight !== undefined) { node.height = Math.min(node.height, node.maxHeight); }

if (node.minWidth !== undefined) { node.width = Math.max(node.width, node.minWidth); }

if (node.minHeight !== undefined) { node.height = Math.max(node.height, node.minHeight); }

if (node.width > this.column) {

node.width = this.column;

} else if (node.width < 1) {

node.width = 1;

}

if (this.maxRow && node.height > this.maxRow) {

node.height = this.maxRow;

} else if (node.height < 1) {

node.height = 1;

}

if (node.x < 0) {

node.x = 0;

}

if (node.y < 0) {

node.y = 0;

}

if (node.x + node.width > this.column) {

if (resizing) {

node.width = this.column - node.x;

} else {

node.x = this.column - node.width;

}

}

if (this.maxRow && node.y + node.height > this.maxRow) {

if (resizing) {

node.height = this.maxRow - node.y;

} else {

node.y = this.maxRow - node.height;

}

}

return node;

};

GridStackEngine.prototype._notify = function() {

if (this._batchMode) { return; }

var args = Array.prototype.slice.call(arguments, 0);

args[0] = (args[0] === undefined ? [] : (Array.isArray(args[0]) ? args[0] : [args[0]]) );

args[1] = (args[1] === undefined ? true : args[1]);

var dirtyNodes = args[0].concat(this.getDirtyNodes());

this.onchange(dirtyNodes, args[1]);

};

GridStackEngine.prototype.cleanNodes = function() {

if (this._batchMode) { return; }

this.nodes.forEach(function(n) { delete n._dirty; });

};

GridStackEngine.prototype.getDirtyNodes = function(verify) {

// compare original X,Y,W,H (or entire node?) instead as _dirty can be a temporary state

if (verify) {

var dirtNodes = [];

this.nodes.forEach(function (n) {

if (n._dirty) {

if (n.y === n._origY && n.x === n._origX && n.width === n._origW && n.height === n._origH) {

delete n._dirty;

} else {

dirtNodes.push(n);

}

}

});

return dirtNodes;

}

return this.nodes.filter(function(n) { return n._dirty; });

};

GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {

node = this._prepareNode(node);

node._id = node._id || ++idSeq;

if (node.autoPosition) {

this._sortNodes();

for (var i = 0;; ++i) {

var x = i % this.column;

var y = Math.floor(i / this.column);

if (x + node.width > this.column) {

continue;

}

if (!this.nodes.find(Utils._isAddNodeIntercepted, {x: x, y: y, node: node})) {

node.x = x;

node.y = y;

delete node.autoPosition; // found our slot

break;

}

}

}

this.nodes.push(node);

if (triggerAddEvent) {

this._addedNodes.push(node);

}

this._fixCollisions(node);

this._packNodes();

this._notify();

return node;

};

GridStackEngine.prototype.removeNode = function(node, detachNode) {

detachNode = (detachNode === undefined ? true : detachNode);

this._removedNodes.push(node);

node._id = null; // hint that node is being removed

this.nodes = Utils.without(this.nodes, node);

this._packNodes();

this._notify(node, detachNode);

};

GridStackEngine.prototype.removeAll = function(detachNode) {

delete this._layouts;

if (this.nodes.length === 0) { return; }

detachNode = (detachNode === undefined ? true : detachNode);

this.nodes.forEach(function(n) { n._id = null; }); // hint that node is being removed

this._removedNodes = this.nodes;

this.nodes = [];

this._notify(this._removedNodes, detachNode);

};

GridStackEngine.prototype.canMoveNode = function(node, x, y, width, height) {

if (!this.isNodeChangedPosition(node, x, y, width, height)) {

return false;

}

var hasLocked = Boolean(this.nodes.find(function(n) { return n.locked; }));

if (!this.maxRow && !hasLocked) {

return true;

}

var clonedNode;

var clone = new GridStackEngine(

this.column,

null,

this.float,

0,

this.nodes.map(function(n) {

if (n === node) {

clonedNode = $.extend({}, n);

return clonedNode;

}

return $.extend({}, n);

}));

if (!clonedNode) { return true;}

clone.moveNode(clonedNode, x, y, width, height);

var res = true;

if (hasLocked) {

res &= !Boolean(clone.nodes.find(function(n) {

return n !== clonedNode && Boolean(n.locked) && Boolean(n._dirty);

}));

}

if (this.maxRow) {

res &= clone.getRow() <= this.maxRow;

}

return res;

};

GridStackEngine.prototype.canBePlacedWithRespectToHeight = function(node) {

if (!this.maxRow) {

return true;

}

var clone = new GridStackEngine(

this.column,

null,

this.float,

0,

this.nodes.map(function(n) { return $.extend({}, n); }));

clone.addNode(node);

return clone.getRow() <= this.maxRow;

};

GridStackEngine.prototype.isNodeChangedPosition = function(node, x, y, width, height) {

if (typeof x !== 'number') { x = node.x; }

if (typeof y !== 'number') { y = node.y; }

if (typeof width !== 'number') { width = node.width; }

if (typeof height !== 'number') { height = node.height; }

if (node.maxWidth !== undefined) { width = Math.min(width, node.maxWidth); }

if (node.maxHeight !== undefined) { height = Math.min(height, node.maxHeight); }

if (node.minWidth !== undefined) { width = Math.max(width, node.minWidth); }

if (node.minHeight !== undefined) { height = Math.max(height, node.minHeight); }

if (node.x === x && node.y === y && node.width === width && node.height === height) {

return false;

}

return true;

};

GridStackEngine.prototype.moveNode = function(node, x, y, width, height, noPack) {

if (node.locked) { return null; }

if (typeof x !== 'number') { x = node.x; }

if (typeof y !== 'number') { y = node.y; }

if (typeof width !== 'number') { width = node.width; }

if (typeof height !== 'number') { height = node.height; }

// constrain the passed in values and check if we're still changing our node

var resizing = (node.width !== width || node.height !== height);

var nn = { x: x, y: y, width: width, height: height,

maxWidth: node.maxWidth, maxHeight: node.maxHeight, minWidth: node.minWidth, minHeight: node.minHeight};

nn = this._prepareNode(nn, resizing);

if (node.x === nn.x && node.y === nn.y && node.width === nn.width && node.height === nn.height) {

return null;

}

node._dirty = true;

node.x = node.lastTriedX = nn.x;

node.y = node.lastTriedY = nn.y;

node.width = node.lastTriedWidth = nn.width;

node.height = node.lastTriedHeight = nn.height;

this._fixCollisions(node);

if (!noPack) {

this._packNodes();

this._notify();

}

return node;

};

GridStackEngine.prototype.getRow = function() {

return this.nodes.reduce(function(memo, n) { return Math.max(memo, n.y + n.height); }, 0);

};

GridStackEngine.prototype.beginUpdate = function(node) {

if (node._updating) return;

node._updating = true;

this.nodes.forEach(function(n) { n._packY = n.y; });

};

GridStackEngine.prototype.endUpdate = function() {

var n = this.nodes.find(function(n) { return n._updating; });

if (n) {

n._updating = false;

this.nodes.forEach(function(n) { delete n._packY; });

}

};

/**

* Construct a grid item from the given element and options

* @param {GridStackElement} el

* @param {GridstackOptions} opts

*/

var GridStack = function(el, opts) {

var self = this;

var oneColumnMode, _prevColumn, isAutoCellHeight;

opts = opts || {};

this.$el = $(el); // TODO: legacy code

this.el = this.$el.get(0); // exposed HTML element to the user

obsoleteOpts(opts, 'width', 'column', 'v0.5.3');

obsoleteOpts(opts, 'height', 'maxRow', 'v0.5.3');

obsoleteOptsDel(opts, 'oneColumnModeClass', 'v0.6.3', '. Use class `.grid-stack-1` instead');

// container attributes

obsoleteAttr(this.$el, 'data-gs-width', 'data-gs-column', 'v0.5.3');

obsoleteAttr(this.$el, 'data-gs-height', 'data-gs-max-row', 'v0.5.3');

obsoleteAttr(this.$el, 'data-gs-current-height', 'data-gs-current-row', 'v1.0.0');

opts.itemClass = opts.itemClass || 'grid-stack-item';

var isNested = this.$el.closest('.' + opts.itemClass).length > 0;

// if row property exists, replace minRow and maxRow instead

if (opts.row) {

opts.minRow = opts.maxRow = opts.row;

delete opts.row;

}

var rowAttr = parseInt(this.$el.attr('data-gs-row'));

// elements attributes override any passed options (like CSS style) - merge the two together

this.opts = Utils.defaults(opts, {

column: parseInt(this.$el.attr('data-gs-column')) || 12,

minRow: rowAttr ? rowAttr : parseInt(this.$el.attr('data-gs-min-row')) || 0,

maxRow: rowAttr ? rowAttr : parseInt(this.$el.attr('data-gs-max-row')) || 0,

itemClass: 'grid-stack-item',

placeholderClass: 'grid-stack-placeholder',

placeholderText: '',

handle: '.grid-stack-item-content',

handleClass: null,

cellHeight: 60,

verticalMargin: 20,

auto: true,

minWidth: 768,

float: false,

staticGrid: false,

_class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),

animate: Boolean(this.$el.attr('data-gs-animate')) || false,

alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,

resizable: Utils.defaults(opts.resizable || {}, {

autoHide: !(opts.alwaysShowResizeHandle || false),

handles: 'se'

}),

draggable: Utils.defaults(opts.draggable || {}, {

handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) ||

'.grid-stack-item-content',

scroll: false,

appendTo: 'body'

}),

disableDrag: opts.disableDrag || false,

disableResize: opts.disableResize || false,

rtl: 'auto',

removable: false,

removableOptions: Utils.defaults(opts.removableOptions || {}, {

accept: '.' + opts.itemClass

}),

removeTimeout: 2000,

verticalMarginUnit: 'px',

cellHeightUnit: 'px',

disableOneColumnMode: opts.disableOneColumnMode || false,

oneColumnModeDomSort: opts.oneColumnModeDomSort,

ddPlugin: null

});

if (this.opts.ddPlugin === false) {

this.opts.ddPlugin = GridStackDragDropPlugin;

} else if (this.opts.ddPlugin === null) {

this.opts.ddPlugin = GridStackDragDropPlugin.registeredPlugins[0] || GridStackDragDropPlugin;

}

this.dd = new this.opts.ddPlugin(this);

if (this.opts.rtl === 'auto') {

this.opts.rtl = this.$el.css('direction') === 'rtl';

}

if (this.opts.rtl) {

this.$el.addClass('grid-stack-rtl');

}

this.opts.isNested = isNested;

isAutoCellHeight = (this.opts.cellHeight === 'auto');

if (isAutoCellHeight) {

// make the cell square initially

self.cellHeight(self.cellWidth(), true);

} else {

this.cellHeight(this.opts.cellHeight, true);

}

this.verticalMargin(this.opts.verticalMargin, true);

this.$el.addClass(this.opts._class);

this._setStaticClass();

if (isNested) {

this.$el.addClass('grid-stack-nested');

}

this._initStyles();

this.engine = new GridStackEngine(this.opts.column, function(nodes, detachNode) {

detachNode = (detachNode === undefined ? true : detachNode);

var maxHeight = 0;

this.nodes.forEach(function(n) {

maxHeight = Math.max(maxHeight, n.y + n.height);

});

nodes.forEach(function(n) {

if (detachNode && n._id === null) {

if (n.el) {

$(n.el).remove();

}

} else {

$(n.el)

.attr('data-gs-x', n.x)

.attr('data-gs-y', n.y)

.attr('data-gs-width', n.width)

.attr('data-gs-height', n.height);

}

});

self._updateStyles(maxHeight + 10);

}, this.opts.float, this.opts.maxRow);

if (this.opts.auto) {

var elements = [];

var _this = this;

this.$el.children('.' + this.opts.itemClass + ':not(.' + this.opts.placeholderClass + ')')

.each(function(index, el) {

el = $(el);

var x = parseInt(el.attr('data-gs-x'));

var y = parseInt(el.attr('data-gs-y'));

elements.push({

el: el.get(0),

// if x,y are missing (autoPosition) add them to end of list - but keep their respective DOM order

i: (Number.isNaN(x) ? 1000 : x) + (Number.isNaN(y) ? 1000 : y) * _this.opts.column

});

});

Utils.sortBy(elements, function(x) { return x.i; }).forEach(function(item) {

this._prepareElement(item.el);

}, this);

}

this.engine._saveInitial(); // initial start of items

this.setAnimation(this.opts.animate);

this.placeholder = $(

'<div class="' + this.opts.placeholderClass + ' ' + this.opts.itemClass + '">' +

'<div class="placeholder-content">' + this.opts.placeholderText + '</div></div>').hide();

this._updateContainerHeight();

this._updateHeightsOnResize = Utils.throttle(function() {

self.cellHeight(self.cellWidth(), false);

}, 100);

/**

* called when we are being resized - check if the one Column Mode needs to be turned on/off

* and remember the prev columns we used.

*/

this.onResizeHandler = function() {

if (isAutoCellHeight) {

self._updateHeightsOnResize();

}

if (!self.opts.disableOneColumnMode && (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= self.opts.minWidth) {

if (self.oneColumnMode) { return }

self.oneColumnMode = true;

self.column(1);

} else {

if (!self.oneColumnMode) { return }

self.oneColumnMode = false;

self.column(self._prevColumn);

}

};

$(window).resize(this.onResizeHandler);

this.onResizeHandler();

if (!self.opts.staticGrid && typeof self.opts.removable === 'string') {

var trashZone = $(self.opts.removable);

if (!this.dd.isDroppable(trashZone)) {

this.dd.droppable(trashZone, self.opts.removableOptions);

}

this.dd

.on(trashZone, 'dropover', function(event, ui) {

var el = $(ui.draggable);

var node = el.data('_gridstack_node');

if (!node || node._grid !== self) {

return;

}

el.data('inTrashZone', true);

self._setupRemovingTimeout(el);

})

.on(trashZone, 'dropout', function(event, ui) {

var el = $(ui.draggable);

var node = el.data('_gridstack_node');

if (!node || node._grid !== self) {

return;

}

el.data('inTrashZone', false);

self._clearRemovingTimeout(el);

});

}

if (!self.opts.staticGrid && self.opts.acceptWidgets) {

var draggingElement = null;

var onDrag = function(event, ui) {

var el = draggingElement;

var node = el.data('_gridstack_node');

var pos = self.getCellFromPixel({left: event.pageX, top: event.pageY}, true);

var x = Math.max(0, pos.x);

var y = Math.max(0, pos.y);

if (!node._added) {

node._added = true;

node.el = el.get(0);

node.autoPosition = true;

node.x = x;

node.y = y;

self.engine.cleanNodes();

self.engine.beginUpdate(node);

self.engine.addNode(node);

self.$el.append(self.placeholder);

self.placeholder

.attr('data-gs-x', node.x)

.attr('data-gs-y', node.y)

.attr('data-gs-width', node.width)

.attr('data-gs-height', node.height)

.show();

node.el = self.placeholder.get(0);

node._beforeDragX = node.x;

node._beforeDragY = node.y;

self._updateContainerHeight();

}

if (!self.engine.canMoveNode(node, x, y)) {

return;

}

self.engine.moveNode(node, x, y);

self._updateContainerHeight();

};

this.dd

.droppable(self.$el, {

accept: function(el) {

el = $(el);

var node = el.data('_gridstack_node');

if (node && node._grid === self) {

return false;

}

return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);

}

})

.on(self.$el, 'dropover', function(event, ui) {

var el = $(ui.draggable);

var width, height;

// see if we already have a node with widget/height and check for attributes

var origNode = el.data('_gridstack_node');

if (!origNode || !origNode.width || !origNode.height) {

var w = parseInt(el.attr('data-gs-width'));

if (w > 0) { origNode = origNode || {}; origNode.width = w; }

var h = parseInt(el.attr('data-gs-height'));

if (h > 0) { origNode = origNode || {}; origNode.height = h; }

}

// if not calculate the grid size based on element outer size

// height: Each row is cellHeight + verticalMargin, until last one which has no margin below

var cellWidth = self.cellWidth();

var cellHeight = self.cellHeight();

var verticalMargin = self.opts.verticalMargin;

width = origNode && origNode.width ? origNode.width : Math.ceil(el.outerWidth() / cellWidth);

height = origNode && origNode.height ? origNode.height : Math.round((el.outerHeight() + verticalMargin) / (cellHeight + verticalMargin));

draggingElement = el;

var node = self.engine._prepareNode({width: width, height: height, _added: false, _temporary: true});

node.isOutOfGrid = true;

el.data('_gridstack_node', node);

el.data('_gridstack_node_orig', origNode);

el.on('drag', onDrag);

return false; // prevent parent from receiving msg (which may be grid as well)

})

.on(self.$el, 'dropout', function(event, ui) {

// jquery-ui bug. Must verify widget is being dropped out

// check node variable that gets set when widget is out of grid

var el = $(ui.draggable);

if (!el.data('_gridstack_node')) {

return;

}

var node = el.data('_gridstack_node');

if (!node.isOutOfGrid) {