build js

Releases

.bithoundrc

@@ -0,0 +1,15 @@
+{
+	"ignore": [
+		"dist/**",
+		"**/node_modules/**",
+		"**/bower_components/**",
+		"**/demo/**",
+		"**/coverage/**"
+	],
+	"test": [
+		"**/spec/**"
+	],
+	"critics": {
+		"lint": "jshint"
+	}
+}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+bower_components
+coverage
+*.log

.jscsrc

@@ -0,0 +1,19 @@
+{
+	"preset": "node-style-guide",
+	"validateIndentation": 4,
+	"maximumLineLength": 120,
+	"jsDoc": {
+		"checkAnnotations": {
+			"preset": "jsdoc3",
+			"extra": {
+				"preserve": true
+			}
+		}
+	},
+	"requireCamelCaseOrUpperCaseIdentifiers": true,
+	"validateLineBreaks": false,
+	"requireTrailingComma": false,
+	"disallowTrailingWhitespace": true,
+	"requireCapitalizedComments": false,
+	"excludeFiles": ["dist/*.js", "demo/*", "spec/*"]
+}

.travis.yml

@@ -0,0 +1,31 @@
+language: node_js
+node_js:
+- 5.7.0
+env:
+- CXX=g++-4.8
+addons:
+  apt:
+    sources:
+    - ubuntu-toolchain-r-test
+    packages:
+    - g++-4.8
+before_install:
+- npm install -g protractor
+install:
+- npm install -g npm@2
+- npm install -g grunt-cli
+- npm install -g bower
+- bower install
+- npm install
+- ./node_modules/protractor/bin/webdriver-manager update --standalone
+before_script:
+- export CHROME_BIN=chromium-browser
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
+script:
+- npm run build
+- npm test
+- grunt e2e-test
+notifications:
+  slack:
+    secure: iGLGsYyVIyKVpVVCskGh/zc6Pkqe0D7jpUtbywSbnq6l5seE6bvBVqm0F2FSCIN+AIC+qal2mPEWysDVsLACm5tTEeA8NfL8dmCrAKbiFbi+gHl4mnHHCHl7ii/7UkoIIXNc5UXbgMSXRS5l8UcsSDlN8VxC5zWstbJvjeYIvbA=

Gruntfile.js

@@ -0,0 +1,139 @@
+// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
+module.exports = function(grunt) {
+    grunt.loadNpmTasks('grunt-sass');
+    grunt.loadNpmTasks('grunt-contrib-cssmin');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.loadNpmTasks('grunt-doctoc');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-jscs');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-protractor-runner');
+    grunt.loadNpmTasks('grunt-contrib-connect');
+    grunt.loadNpmTasks('grunt-protractor-webdriver');
+
+    grunt.initConfig({
+        sass: {
+            options: {
+                outputStyle: 'expanded'
+            },
+            dist: {
+                files: {
+                    'dist/gridstack.css': 'src/gridstack.scss',
+                    'dist/gridstack-extra.css': 'src/gridstack-extra.scss'
+                }
+            }
+        },
+
+        cssmin: {
+            dist: {
+                files: {
+                    'dist/gridstack.min.css': ['dist/gridstack.css'],
+                    'dist/gridstack-extra.min.css': ['dist/gridstack-extra.css']
+                }
+            }
+        },
+
+        copy: {
+            dist: {
+                files: {
+                    'dist/gridstack.js': ['src/gridstack.js'],
+                    'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'],
+                }
+            }
+        },
+
+        uglify: {
+            options: {
+                sourceMap: true,
+                sourceMapName: 'dist/gridstack.min.map',
+                preserveComments: 'some'
+            },
+            dist: {
+                files: {
+                    'dist/gridstack.min.js': ['src/gridstack.js'],
+                    'dist/gridstack.jQueryUI.min.js': ['src/gridstack.jQueryUI.js'],
+                    'dist/gridstack.all.js': ['src/gridstack.js', 'src/gridstack.jQueryUI.js']
+                }
+            }
+        },
+
+        doctoc: {
+            options: {
+                removeAd: false
+            },
+            readme: {
+                options: {
+                    target: './README.md'
+                }
+            },
+            doc: {
+                options: {
+                    target: './doc/README.md'
+                }
+            },
+            faq: {
+                options: {
+                    target: './doc/FAQ.md'
+                }
+            },
+        },
+
+        jshint: {
+            all: ['src/*.js']
+        },
+
+        jscs: {
+            all: ['*.js', 'src/*.js', ],
+        },
+
+        watch: {
+            scripts: {
+                files: ['src/*.js'],
+                tasks: ['uglify', 'copy'],
+                options: {
+                },
+            },
+            styles: {
+                files: ['src/*.scss'],
+                tasks: ['sass', 'cssmin'],
+                options: {
+                },
+            },
+            docs: {
+                files: ['README.md', 'doc/README.md', 'doc/FAQ.md'],
+                tasks: ['doctoc'],
+                options: {
+                },
+            },
+        },
+
+        protractor: {
+            options: {
+                configFile: 'protractor.conf.js',
+            },
+            all: {}
+        },
+
+        connect: {
+            all: {
+                options: {
+                    port: 8080,
+                    hostname: 'localhost',
+                    base: '.',
+                },
+            },
+        },
+
+        protractor_webdriver: {
+            all: {
+                options: {
+                    command: 'webdriver-manager start',
+                }
+            }
+        }
+    });
+
+    grunt.registerTask('default', ['sass', 'cssmin', 'jshint', 'jscs', 'copy', 'uglify', 'doctoc']);
+    grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']);
+};

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Pavel Reznikov
+Copyright (c) 2014-2016 Pavel Reznikov, Dylan Weiss
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

README.md

@@ -1,15 +1,70 @@
 gridstack.js
 ============
 
-gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build 
-draggable responsive bootstrap v3 friendly layouts. It also works great with [knockout.js](http://knockoutjs.com)
+[![Build Status](https://travis-ci.org/troolee/gridstack.js.svg?branch=master)](https://travis-ci.org/troolee/gridstack.js)
+[![Coverage Status](https://coveralls.io/repos/github/troolee/gridstack.js/badge.svg?branch=master)](https://coveralls.io/github/troolee/gridstack.js?branch=master)
+[![Dependency Status](https://david-dm.org/troolee/gridstack.js.svg)](https://david-dm.org/troolee/gridstack.js)
+[![devDependency Status](https://david-dm.org/troolee/gridstack.js/dev-status.svg)](https://david-dm.org/troolee/gridstack.js#info=devDependencies)
+[![Stories in Ready](https://badge.waffle.io/troolee/gridstack.js.png?label=ready&title=Ready)](http://waffle.io/troolee/gridstack.js)
+
+gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build
+draggable responsive bootstrap v3 friendly layouts. It also works great with [knockout.js](http://knockoutjs.com), [angular.js](https://angularjs.org) and touch devices.
+
+Inspired by [gridster.js](https://github.com/ducksboard/gridster.js). Built with love.
+
+Join gridstack.js on Slack: https://gridstackjs.troolee.com
+
+[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.troolee.com)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
+
+- [Demo](#demo)
+- [Usage](#usage)
+  - [Requirements](#requirements)
+      - [Using gridstack.js with jQuery UI](#using-gridstackjs-with-jquery-ui)
+  - [Install](#install)
+  - [Basic usage](#basic-usage)
+  - [Migrating to v0.3.0](#migrating-to-v030)
+  - [Migrating to v0.2.5](#migrating-to-v025)
+  - [API Documentation](#api-documentation)
+  - [Questions and Answers](#questions-and-answers)
+  - [Touch devices support](#touch-devices-support)
+  - [Use with knockout.js](#use-with-knockoutjs)
+  - [Use with angular.js](#use-with-angularjs)
+  - [Rails integration](#rails-integration)
+  - [Change grid width](#change-grid-width)
+  - [Extra CSS](#extra-css)
+    - [Different grid widths](#different-grid-widths)
+  - [Save grid to array](#save-grid-to-array)
+  - [Load grid from array](#load-grid-from-array)
+  - [Override resizable/draggable options](#override-resizabledraggable-options)
+  - [IE8 support](#ie8-support)
+  - [Use with require.js](#use-with-requirejs)
+  - [Nested grids](#nested-grids)
+  - [Resizing active grid](#resizing-active-grid)
+  - [Using AniJS](#using-anijs)
+- [The Team](#the-team)
+- [Changes](#changes)
+      - [v0.3.0-dev (Development Version)](#v030-dev-development-version)
+      - [v0.2.6 (2016-08-17)](#v026-2016-08-17)
+      - [v0.2.5 (2016-03-02)](#v025-2016-03-02)
+      - [v0.2.4 (2016-02-15)](#v024-2016-02-15)
+      - [v0.2.3 (2015-06-23)](#v023-2015-06-23)
+      - [v0.2.2 (2014-12-23)](#v022-2014-12-23)
+      - [v0.2.1 (2014-12-09)](#v021-2014-12-09)
+      - [v0.2.0 (2014-11-30)](#v020-2014-11-30)
+      - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
+- [License](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-Inspired by [gridster.js](http://gridster.net). Built with love.
 
 Demo
 ====
 
-Please visit http://troolee.github.io/gridstack.js/ for demo.
+Please visit http://troolee.github.io/gridstack.js/ for demo. Or check out [these example](http://troolee.github.io/gridstack.js/demo/).
 
 
 Usage
@@ -17,22 +72,58 @@ Usage
 
 ## Requirements
 
-* http://underscorejs.org (>= 1.7.0)
-* http://jquery.com (>= 1.11.0) 
-* http://jqueryui.com (>= 1.11.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable
-* (Optional) http://knockoutjs.com (>= 3.2.0)
+* [lodash.js](https://lodash.com) (>= 3.5.0, full build)
+* [jQuery](http://jquery.com) (>= 3.1.0)
+
+Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) instead of lodash.js
+
+#### Using gridstack.js with jQuery UI
+
+* [jQuery UI](http://jqueryui.com) (>= 1.12.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable
+* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
+
+## Install
+
+```html
+<link rel="stylesheet" href="gridstack.css" />
+<script src="gridstack.js"></script>
+<script src="gridstack.jQueryUI.js"></script>
+```
+
+* Using CDN:
+
+```html
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
+<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>
+```
+
+* Using bower:
+
+```bash
+$ bower install gridstack
+```
+
+* Using npm:
+
+[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack)
+
+```bash
+$ npm install gridstack
+```
+
+You can download files from `dist` directory as well.
 
 ## Basic usage
 
 ```html
 <div class="grid-stack">
-    <div class="grid-stack-item" 
-        data-gs-x="0" data-gs-y="0" 
+    <div class="grid-stack-item"
+        data-gs-x="0" data-gs-y="0"
         data-gs-width="4" data-gs-height="2">
             <div class="grid-stack-item-content"></div>
     </div>
-    <div class="grid-stack-item" 
-        data-gs-x="4" data-gs-y="0" 
+    <div class="grid-stack-item"
+        data-gs-x="4" data-gs-y="0"
         data-gs-width="4" data-gs-height="4">
             <div class="grid-stack-item-content"></div>
     </div>
@@ -41,243 +132,129 @@ Usage
 <script type="text/javascript">
 $(function () {
     var options = {
-        cell_height: 80,
-        vertical_margin: 10
+        cellHeight: 80,
+        verticalMargin: 10
     };
     $('.grid-stack').gridstack(options);
 });
 </script>
 ```
 
-## Options
+## Migrating to v0.3.0
 
-- `animate` - turns animation on (default: `false`)
-- `auto` - if `false` it tells to do not initialize existing items (default: `true`)
-- `cell_height` - one cell height (default: `60`)
-- `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
-- `height` - maximum rows amount. Default is `0` which means no maximum rows
-- `float` - enable floating widgets (default: `false`)
-- `item_class` - widget class (default: `'grid-stack-item'`)
-- `min_width` - minimal width. If window width is less grid will be shown in one-column mode (default: `768`)
-- `placeholder_class` - class for placeholder (default: `'grid-stack-placeholder'`)
-- `vertical_margin` - vertical gap size (default: `20`)
-- `width` - amount of columns (default: `12`)
+As of v0.3.0, gridstack introduces a new plugin system. The drag'n'drop functionality has been modified to take advantage of this system. Because of this, and to avoid dependency on core code from jQuery UI, the plugin was functionality was moved to a separate file.
 
-## Grid attributes
+To ensure gridstack continues to work, either include the additional `gridstack.jQueryUI.js` file into your HTML or use `gridstack.all.js`:
 
-- `data-gs-animate` - turns animation on 
-- `data-gs-width` - amount of columns
-- `data-gs-height` - maximum rows amount. Default is `0` which means no maximum rows.
+```html
+<script src="gridstack.js"></script>
+<script src="gridstack.jQueryUI.js"></script>
+```
 
-## Item attributes
+or
 
-- `data-gs-x`, `data-gs-y` - element position
-- `data-gs-width`, `data-gs-height` - element size
-- `data-gs-max-width`, `data-gs-min-width`, `data-gs-max-height`, `data-gs-min-height` - element constraints
-- `data-gs-no-resize` - disable element resizing
-- `data-gs-no-move` - disable element moving 
-- `data-gs-auto-position` - tells to ignore `data-gs-x` and `data-gs-y` attributes and to place element to the first 
-    available position
-- `data-gs-locked` - the widget will be locked. It means another widgets couldn't move it during dragging or resizing.
-The widget is still can be dragged or resized. You need to add `data-gs-no-resize` and `data-gs-no-move` attributes
-to completely lock the widget.
-    
-## Events
+```html
+<script src="gridstack.all.js"></script>
+```
 
-### onchange(items)
+We're working on implementing support for other drag'n'drop libraries through the new plugin system.
 
-Occurs when widgets change their position/size
+## Migrating to v0.2.5
+
+As of v0.2.5 all methods and parameters are in camel case to respect [JavaScript Style Guide and Coding Conventions](http://www.w3schools.com/js/js_conventions.asp).
+All old methods and parameters are marked as deprecated and still available but a warning will be displayed in js console. They will be available until v1.0
+when they will be completely removed.
+
+## API Documentation
+
+Please check out `doc/README.md` for more information about gridstack.js API.
+
+## Questions and Answers
+
+Please feel free to as a questions here in issues, using [Stackoverflow](http://stackoverflow.com/search?q=gridstack) or [Slack chat](https://gridstackjs.troolee.com).
+We will glad to answer and help you as soon as we can.
+
+Also please check our FAQ `doc/FAQ.md` before asking in case the answer is already there.
+
+## Touch devices support
+
+Please use [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable
+working on touch-based devices.
+
+```html
+<script src="lodash.min.js"></script>
+<script src="jquery.min.js"></script>
+<script src="jquery-ui.min.js"></script>
+<script src="jquery.ui.touch-punch.min.js"></script>
+
+<script src="gridstack.js"></script>
+```
+
+Also `alwaysShowResizeHandle` option may be useful:
 
 ```javascript
-var serialize_widget_map = function (items) {
-    console.log(items);
-};
-
-$('.grid-stack').on('change', function (e, items) {
-    serialize_widget_map(items);
+$(function () {
+    var options = {
+        alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+    };
+    $('.grid-stack').gridstack(options);
 });
 ```
 
-### ondragstart(event, ui)
-
-```javascript
-$('.grid-stack').on('dragstart', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
-```
-
-### ondragstop(event, ui)
-
-```javascript
-$('.grid-stack').on('dragstop', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
-```
-
-### onresizestart(event, ui)
-
-```javascript
-$('.grid-stack').on('resizestart', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
-```
-
-### onresizestop(event, ui)
-
-```javascript
-$('.grid-stack').on('resizestop', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
-```
-
-
-## API
-
-### add_widget(el, x, y, width, height, auto_position)
-
-Creates new widget.
-
-Parameters:
-
-- `el` - widget to add
-- `x`, `y`, `width`, `height` - widget position/dimensions (Optional)
-- `auto_position` - if `true` then `x`, `y` parameters will be ignored and widget will be places on the first available
-position
-
-Widget will be always placed even if result height will be more then grid height. You need to use `will_it_fit` method
-before call `add_widget` for additional check.
-
-```javascript
-$('.grid-stack').gridstack();
-
-var grid = $('.grid-stack').data('gridstack');
-grid.add_widget(el, 0, 0, 3, 2, true);
-```
-
-### locked(el, val)
-
-Locks/unlocks widget.
-
-- `el` - widget to modify.
-- `val` - if `true` widget will be locked. 
-
-### remove_widget(el)
-
-Removes widget from the grid.
-
-Parameters:
-
-- `el` - widget to remove
-
-### remove_all()
-
-Removes all widgets from the grid.
-
-### resize(el, width, \[height\])
-
-Changes widget size
-
-Parameters:
-
-- `el` - widget to resize
-- `width`, `height` - new dimensions. If value is `null` or `undefined` it will be ignored.
-
-### move(el, x, \[y\])
-
-Changes widget position
-
-Parameters:
-
-- `el` - widget to move
-- `x`, `y` - new position. If value is `null` or `undefined` it will be ignored.
-
-### resizable(el, val)
-
-Enables/Disables resizing.
-
-- `el` - widget to modify
-- `val` - if `true` widget will be resizable. 
-
-### movable(el, val)
-
-Enables/Disables moving.
-
-- `el` - widget to modify
-- `val` - if `true` widget will be draggable.
-
-### will_it_fit(x, y, width, height, auto_position)
-
-Returns `true` if the `height` of the grid will be less the vertical constraint. Always returns `true` if grid doesn't
-have `height` constraint.
-
-```javascript
-if (grid.will_it_fit(new_node.x, new_node.y, new_node.width, new_node.height, true)) {
-    grid.add_widget(new_node.x, new_node.y, new_node.width, new_node.height, true);
-}
-else {
-    alert('Not enough free space to place the widget');
-}
-```
- 
-
-## Utils
-
-### GridStackUI.Utils.sort(nodes, \[dir\], \[width\])
-
-Sorts array of nodes
-
-- `nodes` - array to sort
-- `dir` - `1` for asc, `-1` for desc
-- `width` - width of the grid. If `undefined` the width will be calculated automatically.
+If you're still experiencing issues on touch devices please check [#444](https://github.com/troolee/gridstack.js/issues/444)
 
 ## Use with knockout.js
 
 ```javascript
 ko.components.register('dashboard-grid', {
     viewModel: {
-        createViewModel: function (params, componentInfo) {
-            var ViewModel = function (params, componentInfo) {
+        createViewModel: function (controller, componentInfo) {
+            var ViewModel = function (controller, componentInfo) {
                 var grid = null;
 
-                this.widgets = params.widgets;
+                this.widgets = controller.widgets;
 
                 this.afterAddWidget = function (items) {
-                    _.each(items, function (item) {
-                        item = $(item);
+                    if (grid == null) {
+                        grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                            auto: false
+                        }).data('gridstack');
+                    }
 
-                        if (grid == null) {
-                            grid = $(componentInfo.element).find('.grid-stack').gridstack({
-                                auto: false
-                            }).data('gridstack');
-                        }
-
-                        grid.add_widget(item);
-                        ko.utils.domNodeDisposal.addDisposeCallback(item[0], function () {
-                            grid.remove_widget(item);
-                        });
-                    }, this);
+                    var item = _.find(items, function (i) { return i.nodeType == 1 });
+                    grid.addWidget(item);
+                    ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
+                        grid.removeWidget(item);
+                    });
                 };
-
             };
 
-            return new ViewModel(params, componentInfo);
+            return new ViewModel(controller, componentInfo);
         }
     },
-    template: [
-        '<div class="grid-stack">',
-        '   <!-- ko foreach: widgets, afterRender: afterAddWidget -->',
-        '       <div class="grid-stack-item" data-bind="attr: {',
-        '               \'data-gs-x\': x, \'data-gs-y\': y,',
-        '               \'data-gs-width\': width, \'data-gs-height\': height}">',
-        '           <span data-bind="text: $index"></span>',
-        '       </div>',
-        '   <!-- /ko -->',
-        '</div>'
-    ].join('\n')
+    template:
+        [
+            '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
+            '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.autoPosition}">',
+            '       <div class="grid-stack-item-content">...</div>',
+            '   </div>',
+            '</div> '
+        ].join('')
+});
+
+$(function () {
+    var Controller = function (widgets) {
+        this.widgets = ko.observableArray(widgets);
+    };
+
+    var widgets = [
+        {x: 0, y: 0, width: 2, height: 2},
+        {x: 2, y: 0, width: 4, height: 2},
+        {x: 6, y: 0, width: 2, height: 4},
+        {x: 1, y: 2, width: 4, height: 2}
+    ];
+
+    ko.applyBindings(new Controller(widgets));
 });
 ```
 
@@ -287,11 +264,324 @@ and HTML:
 <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
 ```
 
+See examples: [example 1](http://troolee.github.io/gridstack.js/demo/knockout.html), [example 2](http://troolee.github.io/gridstack.js/demo/knockout2.html).
+
+**Notes:** It's very important to exclude training spaces after widget template:
+
+```javascript
+template:
+    [
+        '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
+        '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.autoPosition}">',
+        '       ....',
+        '   </div>', // <-- NO SPACE **AFTER** </div>
+        '</div> '    // <-- NO SPACE **BEFORE** </div>
+    ].join('')       // <-- JOIN WITH **EMPTY** STRING
+```
+
+Otherwise `addDisposeCallback` won't work.
+
+
+## Use with angular.js
+
+Please check [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
+
+
+## Rails integration
+
+For rails users, integration of gridstack.js and its dependencies can be done through [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
+
+
+## Change grid width
+
+To change grid width (columns count), to addition to `width` option, CSS rules
+for `.grid-stack-item[data-gs-width="X"]` and  `.grid-stack-item[data-gs-x="X"]` have to be changed accordingly.
+
+For instance for 3-column grid you need to rewrite CSS to be:
+
+```css
+.grid-stack-item[data-gs-width="3"]  { width: 100% }
+.grid-stack-item[data-gs-width="2"]  { width: 66.66666667% }
+.grid-stack-item[data-gs-width="1"]  { width: 33.33333333% }
+
+.grid-stack-item[data-gs-x="2"]  { left: 66.66666667% }
+.grid-stack-item[data-gs-x="1"]  { left: 33.33333333% }
+```
+
+For 4-column grid it should be:
+
+```css
+.grid-stack-item[data-gs-width="4"]  { width: 100% }
+.grid-stack-item[data-gs-width="3"]  { width: 75% }
+.grid-stack-item[data-gs-width="2"]  { width: 50% }
+.grid-stack-item[data-gs-width="1"]  { width: 25% }
+
+.grid-stack-item[data-gs-x="3"]  { left: 75% }
+.grid-stack-item[data-gs-x="2"]  { left: 50% }
+.grid-stack-item[data-gs-x="1"]  { left: 25% }
+```
+
+and so on.
+
+Here is a SASS code snipped which can make life easier (Thanks to @ascendantofrain, [#81](https://github.com/troolee/gridstack.js/issues/81)):
+
+```sass
+.grid-stack-item {
+
+    $gridstack-columns: 12;
+
+    @for $i from 1 through $gridstack-columns {
+        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
+        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
+        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
+        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+    }
+}
+```
+
+Or you can include `gridstack-extra.css`. See below for more details.
+
+## Extra CSS
+
+There are few extra CSS batteries in `gridstack-extra.css` (`gridstack-extra.min.css`).
+
+### Different grid widths
+
+You can use other than 12 grid width:
+
+```html
+<div class="grid-stack grid-stack-N">...</div>
+```
+```javascript
+$('.grid-stack').gridstack({width: N});
+```
+
+See example: [2 grids demo](http://troolee.github.io/gridstack.js/demo/two.html)
+
+## Save grid to array
+
+Because gridstack doesn't track any kind of user-defined widget id there is no reason to make serialization to be part
+of gridstack API. To serialize grid you can simply do something like this (let's say you store widget id inside `data-custom-id`
+attribute):
+
+```javascript
+var res = _.map($('.grid-stack .grid-stack-item:visible'), function (el) {
+    el = $(el);
+    var node = el.data('_gridstack_node');
+    return {
+        id: el.attr('data-custom-id'),
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height
+    };
+});
+alert(JSON.stringify(res));
+```
+
+See example: [Serialization demo](http://troolee.github.io/gridstack.js/demo/serialization.html)
+
+You can also use `onchange` event if you need to save only changed widgets right away they have been changed.
+
+## Load grid from array
+
+```javascript
+var serialization = [
+    {x: 0, y: 0, width: 2, height: 2},
+    {x: 3, y: 1, width: 1, height: 2},
+    {x: 4, y: 1, width: 1, height: 1},
+    {x: 2, y: 3, width: 3, height: 1},
+    {x: 1, y: 4, width: 1, height: 1},
+    {x: 1, y: 3, width: 1, height: 1},
+    {x: 2, y: 4, width: 1, height: 1},
+    {x: 2, y: 5, width: 1, height: 1}
+];
+
+serialization = GridStackUI.Utils.sort(serialization);
+
+var grid = $('.grid-stack').data('gridstack');
+grid.removeAll();
+
+_.each(serialization, function (node) {
+    grid.addWidget($('<div><div class="grid-stack-item-content" /></div>'),
+        node.x, node.y, node.width, node.height);
+});
+```
+
+See example: [Serialization demo](http://troolee.github.io/gridstack.js/demo/serialization.html)
+
+If you're using knockout there is no need for such method at all.
+
+## Override resizable/draggable options
+
+You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle
+you can init gridsack like:
+
+```javascript
+$('.grid-stack').gridstack({
+    resizable: {
+        handles: 'e, se, s, sw, w'
+    }
+});
+```
+
+Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behaviour may be unexpected.
+
+## IE8 support
+
+Support of IE8 is quite limited and is not a goal at this time. As far as IE8 doesn't support DOM Level 2 I cannot manipulate with
+CSS stylesheet dynamically. As a workaround you can do the following:
+
+- Create `gridstack-ie8.css` for your configuration (sample for grid with cell height of 60px can be found [here](https://gist.github.com/troolee/6edfea5857f4cd73e6f1)).
+- Include this CSS:
+
+```html
+<!--[if lt IE 9]>
+<link rel="stylesheet" href="gridstack-ie8.css"/>
+<![endif]-->
+```
+
+- You can use this python script to generate such kind of CSS:
+
+```python
+#!/usr/bin/env python
+
+height = 60
+margin = 20
+N = 100
+
+print '.grid-stack > .grid-stack-item { min-height: %(height)spx }' % {'height': height}
+
+for i in range(N):
+	h = height * (i + 1) + margin * i
+	print '.grid-stack > .grid-stack-item[data-gs-height="%(index)s"] { height: %(height)spx }' % {'index': i + 1, 'height': h}
+
+for i in range(N):
+	h = height * (i + 1) + margin * i
+	print '.grid-stack > .grid-stack-item[data-gs-min-height="%(index)s"] { min-height: %(height)spx }' % {'index': i + 1, 'height': h}
+
+for i in range(N):
+	h = height * (i + 1) + margin * i
+	print '.grid-stack > .grid-stack-item[data-gs-max-height="%(index)s"] { max-height: %(height)spx }' % {'index': i + 1, 'height': h}
+
+for i in range(N):
+	h = height * i + margin * i
+	print '.grid-stack > .grid-stack-item[data-gs-y="%(index)s"] { top: %(height)spx }' % {'index': i , 'height': h}
+```
+
+There are at least two more issues with gridstack in IE8 with jQueryUI resizable (it seems it doesn't work) and
+droppable. If you have any suggestions about support of IE8 you are welcome here: https://github.com/troolee/gridstack.js/issues/76
+
+## Use with require.js
+
+If you're using require.js and a single file jQueryUI please check out this
+[Stackoverflow question](http://stackoverflow.com/questions/35582945/redundant-dependencies-with-requirejs) to get it
+working properly.
+
+
+## Nested grids
+
+Gridstack may be nested. All nested grids have an additional class `grid-stack-nested` which is assigned automatically
+during initialization.
+See example: [Nested grid demo](http://troolee.github.io/gridstack.js/demo/nested.html)
+
+
+## Resizing active grid
+
+Resizing on-the-fly is possible, though experimental. This may be used to make gridstack responsive. gridstack will change the total number of columns and will attempt to update the width and x values of each widget to be more logical.
+See example: [Responsive grid demo](http://troolee.github.io/gridstack.js/demo/responsive.html)
+
+## Using AniJS
+
+Using AniJS with gridstack is a breeze. In the following example, a listener is added that gets triggered by a widget being added.
+See widgets wiggle! [AniJS demo](http://troolee.github.io/gridstack.js/demo/anijs.html)
+
+The Team
+========
+
+gridstack.js is currently maintained by [Pavel Reznikov](https://github.com/troolee), [Dylan Weiss](https://github.com/radiolips)
+and [Kevin Dietrich](https://github.com/kdietrich). And we appreciate [all contributors](https://github.com/troolee/gridstack.js/graphs/contributors)
+for help.
+
 
 Changes
 =======
 
-#### v0.2.1
+#### v0.3.0-dev (Development Version)
+
+- add oneColumnModeClass option to grid.
+- remove 768px CSS styles, moved to grid-stack-one-column-mode class.
+- add max-width override on grid-stck-one-column-mode ([#462](https://github.com/troolee/gridstack.js/issues/462)).
+- add internal function`isNodeChangedPosition`, minor optimization to move/drag.
+- drag'n'drop plugin system. Move jQuery UI dependencies to separate plugin file.
+
+#### v0.2.6 (2016-08-17)
+
+- update requirements to the latest versions of jQuery (v3.1.0+) and jquery-ui (v1.12.0+).
+- fix jQuery `size()` ([#486](https://github.com/troolee/gridstack.js/issues/486)).
+- update `destroy([detachGrid])` call ([#422](https://github.com/troolee/gridstack.js/issues/422)).
+- don't mutate options when calling `draggable` and `resizable`. ([#505](https://github.com/troolee/gridstack.js/issues/505)).
+- update _notify to allow detach ([#411](https://github.com/troolee/gridstack.js/issues/411)).
+- fix code that checks for jquery-ui ([#481](https://github.com/troolee/gridstack.js/issues/481)).
+- fix `cellWidth` calculation on empty grid
+
+#### v0.2.5 (2016-03-02)
+
+- update names to respect js naming convention.
+- `cellHeight` and `verticalMargin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs).
+- add `maxWidth`/`maxHeight` methods.
+- add `enableMove`/`enableResize` methods.
+- fix window resize issue #331.
+- add options `disableDrag` and `disableResize`.
+- fix `batchUpdate`/`commit` (Thank to @radiolips)
+- remove dependency of FontAwesome
+- RTL support
+- `'auto'` value for `cellHeight` option
+- fix `setStatic` method
+- add `setAnimation` method to API
+- add `setGridWidth` method ([#227](https://github.com/troolee/gridstack.js/issues/227))
+- add `removable`/`removeTimeout` *(experimental)*
+- add `detachGrid` parameter to `destroy` method ([#216](https://github.com/troolee/gridstack.js/issues/216)) (thanks @jhpedemonte)
+- add `useOffset` parameter to `getCellFromPixel` method ([#237](https://github.com/troolee/gridstack.js/issues/237))
+- add `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `id` parameters to `addWidget` ([#188](https://github.com/troolee/gridstack.js/issues/188))
+- add `added` and `removed` events for when a widget is added or removed, respectively. ([#54](https://github.com/troolee/gridstack.js/issues/54))
+- add `acceptWidgets` parameter. Widgets can now be draggable between grids or from outside *(experimental)*
+
+#### v0.2.4 (2016-02-15)
+
+- fix closure compiler/linter warnings
+- add `static_grid` option.
+- add `min_width`/`min_height` methods (Thanks to @cvillemure)
+- add `destroy` method (Thanks to @zspitzer)
+- add `placeholder_text` option (Thanks to @slauyama)
+- add `handle_class` option.
+- add `make_widget` method.
+- lodash v 4.x support (Thanks to @andrewr88)
+
+#### v0.2.3 (2015-06-23)
+
+- gridstack-extra.css
+- add support of lodash.js
+- add `is_area_empty` method
+- nested grids
+- add `batch_update`/`commit` methods
+- add `update` method
+- allow to override `resizable`/`draggable` options
+- add `disable`/`enable` methods
+- add `get_cell_from_pixel` (thanks to @juchi)
+- AMD support
+- fix nodes sorting
+- improved touch devices support
+- add `always_show_resize_handle` option
+- minor fixes and improvements
+
+#### v0.2.2 (2014-12-23)
+
+- fix grid initialization
+- add `cell_height`/`cell_width` API methods
+- fix boolean attributes (issue #31)
+
+#### v0.2.1 (2014-12-09)
 
 - add widgets locking (issue #19)
 - add `will_it_fit` API method
@@ -308,7 +598,7 @@ Changes
 - auto-generate css rules (widgets `height` and `top`)
 - add `GridStackUI.Utils.sort` utility function
 - add `remove_all` API method
-- add `resize` and `move` API methods 
+- add `resize` and `move` API methods
 - add `resizable` and `movable` API methods
 - add `data-gs-no-move` attribute
 - add `float` option
@@ -325,7 +615,7 @@ License
 
 The MIT License (MIT)
 
-Copyright (c) 2014 Pavel Reznikov
+Copyright (c) 2014-2016 Pavel Reznikov, Dylan Weiss
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -344,4 +634,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-

bower.json

@@ -0,0 +1,36 @@
+{
+  "name": "gridstack",
+  "version": "0.3.0-dev",
+  "homepage": "https://github.com/troolee/gridstack.js",
+  "authors": [
+    "Pavel Reznikov <pashka.reznikov@gmail.com>"
+  ],
+  "description": "gridstack.js is a jQuery plugin for widget layout",
+  "main": [
+    "dist/gridstack.js",
+    "dist/gridstack.css"
+  ],
+  "moduleType": [
+    "amd"
+  ],
+  "dependencies": {
+    "lodash": ">= 4.14.2",
+    "jquery": ">= 3.1.0",
+    "jquery-ui": ">= 1.12.0"
+  },
+  "keywords": [
+    "gridstack",
+    "grid",
+    "gridster",
+    "layout",
+    "jquery"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

demo/anijs.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>AniJS demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+    <link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>AniJS demo</h1>
+
+        <div>
+            <a class="btn btn-default" id="add-widget" href="#">Add Widget</a>
+        </div>
+
+        <div>
+            <h4>Widget added</h4>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
+    <script type="text/javascript">
+        $(function () {
+            $('.grid-stack').gridstack();
+            var self = this;
+            this.grid = $('.grid-stack').data('gridstack');
+            $('.grid-stack').on('added', function(event, items) {
+                // add anijs data to gridstack item
+                for (var i = 0; i < items.length; i++) {
+                    $(items[i].el[0]).attr('data-anijs', 'if: added, do: swing animated, after: $removeAnimations, on: $gridstack');
+                }
+                AniJS.run();
+                self.gridstackNotifier = AniJS.getNotifier('gridstack');
+                // fire added event!
+                self.gridstackNotifier.dispatchEvent('added');
+            });
+            $('#add-widget').click(function() {
+                addNewWidget();
+            });
+
+            function addNewWidget() {
+                var grid = $('.grid-stack').data('gridstack');
+                grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
+            }
+
+            var animationHelper = AniJS.getHelper();
+
+            //Defining removeAnimations to remove existing animations
+            animationHelper.removeAnimations = function(e, animationContext){
+                $('.grid-stack-item').attr('data-anijs', '');
+            };
+        });
+    </script>
+</body>
+</html>

demo/float.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Float grid demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Float grid demo</h1>
+
+        <div>
+            <a class="btn btn-default" id="add-new-widget" href="#">Add Widget</a>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+                float: true
+            };
+            $('.grid-stack').gridstack(options);
+
+            new function () {
+                this.items = [
+                    {x: 0, y: 0, width: 2, height: 2},
+                    {x: 3, y: 1, width: 1, height: 2},
+                    {x: 4, y: 1, width: 1, height: 1},
+                    {x: 2, y: 3, width: 3, height: 1},
+//                    {x: 1, y: 4, width: 1, height: 1},
+//                    {x: 1, y: 3, width: 1, height: 1},
+//                    {x: 2, y: 4, width: 1, height: 1},
+                    {x: 2, y: 5, width: 1, height: 1}
+                ];
+
+                this.grid = $('.grid-stack').data('gridstack');
+
+                this.addNewWidget = function () {
+                    var node = this.items.pop() || {
+                                x: 12 * Math.random(),
+                                y: 5 * Math.random(),
+                                width: 1 + 3 * Math.random(),
+                                height: 1 + 3 * Math.random()
+                            };
+                    this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
+                        node.x, node.y, node.width, node.height);
+                    return false;
+                }.bind(this);
+
+                $('#add-new-widget').click(this.addNewWidget);
+            };
+        });
+    </script>
+</body>
+</html>

demo/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Demo</title>
+</head>
+<body>
+    <ul>
+        <li><a href="float.html">Float grid demo</a></li>
+        <li><a href="knockout.html">Knockout.js demo</a></li>
+        <li><a href="knockout2.html">Knockout.js demo (2)</a></li>
+        <li><a href="nested.html">Nested grids demo</a></li>
+        <li><a href="rtl.html">RTL demo</a></li>
+        <li><a href="serialization.html">Serialization demo</a></li>
+        <li><a href="two.html">Two grids demo</a></li>
+        <li><a href="responsive.html">Resize grid (responsive) demo</a></li>
+        <li><a href="anijs.html">AniJS demo</a></li>
+    </ul>
+</body>
+</html>

demo/knockout.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Knockout.js demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>knockout.js Demo</h1>
+
+        <div>
+            <button data-bind="click: addNewWidget">Add new widget</button>
+        </div>
+
+        <br>
+
+        <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+    </div>
+
+
+    <script type="text/javascript">
+        ko.components.register('dashboard-grid', {
+            viewModel: {
+                createViewModel: function (controller, componentInfo) {
+                    var ViewModel = function (controller, componentInfo) {
+                        var grid = null;
+
+                        this.widgets = controller.widgets;
+
+                        this.afterAddWidget = function (items) {
+                            if (grid == null) {
+                                grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                                    auto: false
+                                }).data('gridstack');
+                            }
+
+                            var item = _.find(items, function (i) { return i.nodeType == 1 });
+                            grid.addWidget(item);
+                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
+                                grid.removeWidget(item);
+                            });
+                        };
+                    };
+
+                    return new ViewModel(controller, componentInfo);
+                }
+            },
+            template:
+                [
+                    '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
+                    '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
+                    '       <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
+                    '   </div>',
+                    '</div> '
+                ].join('')
+        });
+
+        $(function () {
+            var Controller = function (widgets) {
+                var self = this;
+
+                this.widgets = ko.observableArray(widgets);
+
+                this.addNewWidget = function () {
+                    this.widgets.push({
+                        x: 0,
+                        y: 0,
+                        width: Math.floor(1 + 3 * Math.random()),
+                        height: Math.floor(1 + 3 * Math.random()),
+                        auto_position: true
+                    });
+                    return false;
+                };
+
+                this.deleteWidget = function (item) {
+                    self.widgets.remove(item);
+                    return false;
+                };
+            };
+
+            var widgets = [
+                {x: 0, y: 0, width: 2, height: 2},
+                {x: 2, y: 0, width: 4, height: 2},
+                {x: 6, y: 0, width: 2, height: 4},
+                {x: 1, y: 2, width: 4, height: 2}
+            ];
+
+            var controller = new Controller(widgets);
+            ko.applyBindings(controller);
+        });
+    </script>
+</body>
+</html>

demo/knockout2.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Knockout.js demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>knockout.js Demo</h1>
+
+        <div>
+            <button data-bind="click: addNewWidget">Add new widget</button>
+        </div>
+
+        <br>
+
+        <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+    </div>
+
+
+    <script type="text/javascript">
+        ko.components.register('dashboard-grid', {
+            viewModel: {
+                createViewModel: function (controller, componentInfo) {
+                    var ViewModel = function (controller, componentInfo) {
+                        var grid = null;
+
+                        this.widgets = controller.widgets;
+
+                        this.afterAddWidget = function (items) {
+                            if (grid == null) {
+                                grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                                    auto: false
+                                }).data('gridstack');
+                            }
+
+                            var item = _.find(items, function (i) { return i.nodeType == 1 });
+                            grid.addWidget(item);
+                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
+                                grid.removeWidget(item);
+                            });
+                        };
+                    };
+
+                    return new ViewModel(controller, componentInfo);
+                }
+            },
+            template: { element: 'gridstack-template' }
+        });
+
+        $(function () {
+            var Controller = function (widgets) {
+                var self = this;
+
+                this.widgets = ko.observableArray(widgets);
+
+                this.addNewWidget = function () {
+                    this.widgets.push({
+                        x: 0,
+                        y: 0,
+                        width: Math.floor(1 + 3 * Math.random()),
+                        height: Math.floor(1 + 3 * Math.random()),
+                        auto_position: true
+                    });
+                    return false;
+                };
+
+                this.deleteWidget = function (item) {
+                    self.widgets.remove(item);
+                    return false;
+                };
+            };
+
+            var widgets = [
+                {x: 0, y: 0, width: 2, height: 2},
+                {x: 2, y: 0, width: 4, height: 2},
+                {x: 6, y: 0, width: 2, height: 4},
+                {x: 1, y: 2, width: 4, height: 2}
+            ];
+
+            var controller = new Controller(widgets);
+            ko.applyBindings(controller);
+        });
+    </script>
+
+    <template id="gridstack-template">
+        <div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
+           <div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
+               <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>
+           </div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->
+    </template>
+</body>
+</html>

demo/nested.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Nested grids demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+
+        .grid-stack .grid-stack {
+            /*margin: 0 -10px;*/
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .grid-stack .grid-stack .grid-stack-item-content {
+            background: lightpink;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Nested grids demo</h1>
+
+        <div class="grid-stack">
+            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
+                <div class="grid-stack-item-content">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
+                </div>
+            </div>
+            <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
+                <div class="grid-stack-item-content">
+
+                        <div class="grid-stack">
+                            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
+                            <div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
+                            <div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
+                            <div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
+
+                            <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
+                            <div class="grid-stack-item" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
+                        </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+            };
+            $('.grid-stack').gridstack(options);
+        });
+    </script>
+</body>
+</html>

demo/responsive.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Responsive grid demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+    <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="device-xs visible-xs"></div>
+    <div class="device-sm visible-sm"></div>
+    <div class="device-md visible-md"></div>
+    <div class="device-lg visible-lg"></div>
+    <div class="device-xl visible-xl"></div>
+    <div class="container-fluid">
+        <h1>Responsive grid demo</h1>
+
+        <div>
+            <span>Number of Columns:</span> <span id="grid-size"></span>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            // thanks to http://stackoverflow.com/a/22885503
+            var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="I am a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
+            var fullDateString = new Date();
+            function isBreakpoint(alias) {
+                return $('.device-' + alias).is(':visible');
+            }
+
+
+            var options = {
+                float: false
+            };
+            $('.grid-stack').gridstack(options);
+            function resizeGrid() {
+                var grid = $('.grid-stack').data('gridstack');
+                if (isBreakpoint('xs')) {
+                    $('#grid-size').text('One column mode');
+                } else if (isBreakpoint('sm')) {
+                    grid.setGridWidth(3);
+                    $('#grid-size').text(3);
+                } else if (isBreakpoint('md')) {
+                    grid.setGridWidth(6);
+                    $('#grid-size').text(6);
+                } else if (isBreakpoint('lg')) {
+                    grid.setGridWidth(12);
+                    $('#grid-size').text(12);
+                }
+            };
+            $(window).resize(function () {
+                waitForFinalEvent(function() {
+                    resizeGrid();
+                }, 300, fullDateString.getTime());
+            });
+
+            new function () {
+                this.serializedData = [
+                    {x: 0, y: 0, width: 4, height: 2},
+                    {x: 3, y: 1, width: 4, height: 2},
+                    {x: 4, y: 1, width: 4, height: 1},
+                    {x: 2, y: 3, width: 8, height: 1},
+                    {x: 0, y: 4, width: 4, height: 1},
+                    {x: 0, y: 3, width: 4, height: 1},
+                    {x: 2, y: 4, width: 4, height: 1},
+                    {x: 2, y: 5, width: 4, height: 1},
+                    {x: 0, y: 6, width: 12, height: 1}
+                ];
+
+                this.grid = $('.grid-stack').data('gridstack');
+
+                this.loadGrid = function () {
+                    this.grid.removeAll();
+                    var items = GridStackUI.Utils.sort(this.serializedData);
+                    _.each(items, function (node, i) {
+                        this.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'),
+                            node.x, node.y, node.width, node.height);
+                    }, this);
+                    return false;
+                }.bind(this);
+
+                this.loadGrid();
+                resizeGrid();
+            };
+        });
+    </script>
+</body>
+</html>

demo/rtl.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en" dir="rtl">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>RTL demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>RTL Demo</h1>
+
+        <div>
+            <button data-bind="click: addNewWidget">Add new widget</button>
+        </div>
+
+        <br>
+
+        <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+    </div>
+
+
+    <script type="text/javascript">
+        ko.components.register('dashboard-grid', {
+            viewModel: {
+                createViewModel: function (controller, componentInfo) {
+                    var ViewModel = function (controller, componentInfo) {
+                        var grid = null;
+
+                        this.widgets = controller.widgets;
+
+                        this.afterAddWidget = function (items) {
+                            if (grid == null) {
+                                grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                                    auto: false
+                                }).data('gridstack');
+                            }
+
+                            var item = _.find(items, function (i) { return i.nodeType == 1 });
+                            grid.addWidget(item);
+                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
+                                grid.removeWidget(item);
+                            });
+                        };
+                    };
+
+                    return new ViewModel(controller, componentInfo);
+                }
+            },
+            template:
+                [
+                    '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
+                    '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
+                    '       <div class="grid-stack-item-content"><center><button data-bind="click: $root.deleteWidget">Delete me</button><br><h5 data-bind="text: index" /></center><br><p>lorem ipsum</p></div>',
+                    '   </div>',
+                    '</div> '
+                ].join('')
+        });
+
+        $(function () {
+            var Controller = function (widgets) {
+                var self = this;
+
+                this.widgets = ko.observableArray(widgets);
+
+                this.addNewWidget = function () {
+                    this.widgets.push({
+                        x: 0,
+                        y: 0,
+                        width: Math.floor(1 + 3 * Math.random()),
+                        height: Math.floor(1 + 3 * Math.random()),
+                        auto_position: true
+                    });
+                    return false;
+                };
+
+                this.deleteWidget = function (item) {
+                    self.widgets.remove(item);
+                    return false;
+                };
+            };
+
+            var widgets = [
+                {x: 0, y: 0, width: 2, height: 2, index: 1},
+                {x: 2, y: 0, width: 4, height: 2, index: 2},
+                {x: 6, y: 0, width: 2, height: 4, index: 3},
+                {x: 1, y: 2, width: 4, height: 2, index: 4}
+            ];
+
+            var controller = new Controller(widgets);
+            ko.applyBindings(controller);
+        });
+    </script>
+</body>
+</html>

demo/serialization.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Serialization demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Serialization demo</h1>
+
+        <div>
+            <a class="btn btn-default" id="save-grid" href="#">Save Grid</a>
+            <a class="btn btn-default" id="load-grid" href="#">Load Grid</a>
+            <a class="btn btn-default" id="clear-grid" href="#">Clear Grid</a>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+
+        <hr/>
+
+        <textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+            };
+            $('.grid-stack').gridstack(options);
+
+            new function () {
+                this.serializedData = [
+                    {x: 0, y: 0, width: 2, height: 2},
+                    {x: 3, y: 1, width: 1, height: 2},
+                    {x: 4, y: 1, width: 1, height: 1},
+                    {x: 2, y: 3, width: 3, height: 1},
+                    {x: 1, y: 4, width: 1, height: 1},
+                    {x: 1, y: 3, width: 1, height: 1},
+                    {x: 2, y: 4, width: 1, height: 1},
+                    {x: 2, y: 5, width: 1, height: 1}
+                ];
+
+                this.grid = $('.grid-stack').data('gridstack');
+
+                this.loadGrid = function () {
+                    this.grid.removeAll();
+                    var items = GridStackUI.Utils.sort(this.serializedData);
+                    _.each(items, function (node) {
+                        this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
+                            node.x, node.y, node.width, node.height);
+                    }, this);
+                    return false;
+                }.bind(this);
+
+                this.saveGrid = function () {
+                    this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
+                        el = $(el);
+                        var node = el.data('_gridstack_node');
+                        return {
+                            x: node.x,
+                            y: node.y,
+                            width: node.width,
+                            height: node.height
+                        };
+                    }, this);
+                    $('#saved-data').val(JSON.stringify(this.serializedData, null, '    '));
+                    return false;
+                }.bind(this);
+
+                this.clearGrid = function () {
+                    this.grid.removeAll();
+                    return false;
+                }.bind(this);
+
+                $('#save-grid').click(this.saveGrid);
+                $('#load-grid').click(this.loadGrid);
+                $('#clear-grid').click(this.clearGrid);
+
+                this.loadGrid();
+            };
+        });
+    </script>
+</body>
+</html>

demo/two.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Two grids demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+    <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        #grid1 {
+            background: lightgoldenrodyellow;
+        }
+
+        #grid2 {
+            background: lightcyan;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+
+        #grid2 .grid-stack-item-content {
+            background-color: #9caabc;
+        }
+
+        .grid-stack-item-removing {
+            opacity: 0.5;
+        }
+
+        .trash {
+            height: 150px;
+            margin-bottom: 20px;
+            background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
+        }
+
+        .sidebar {
+            background: rgba(0, 255, 0, 0.1);
+            height: 150px;
+            padding: 25px 0;
+            text-align: center;
+        }
+
+        .sidebar .grid-stack-item {
+            width: 200px;
+            height: 100px;
+            border: 2px dashed green;
+            text-align: center;
+            line-height: 100px;
+            z-index: 10;
+            background: rgba(0, 255, 0, 0.1);
+            cursor: default;
+            display: inline-block;
+        }
+
+        .sidebar .grid-stack-item .grid-stack-item-content {
+            background: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Two grids demo</h1>
+
+        <div class="row">
+            <div class="col-md-3">
+                <div class="sidebar">
+                    <div class="grid-stack-item"><div class="grid-stack-item-content">Drag me</div></div>
+                </div>
+            </div>
+            <div class="col-md-9">
+                <div class="trash">
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div class="grid-stack grid-stack-6" id="grid1">
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="grid-stack grid-stack-6" id="grid2">
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+                width: 6,
+                float: false,
+                removable: '.trash',
+                removeTimeout: 100,
+                acceptWidgets: '.grid-stack-item'
+            };
+            $('#grid1').gridstack(options);
+            $('#grid2').gridstack(_.defaults({
+                float: true
+            }, options));
+
+            var items = [
+                {x: 0, y: 0, width: 2, height: 2},
+                {x: 3, y: 1, width: 1, height: 2},
+                {x: 4, y: 1, width: 1, height: 1},
+                {x: 2, y: 3, width: 3, height: 1},
+                {x: 2, y: 5, width: 1, height: 1}
+            ];
+
+            $('.grid-stack').each(function () {
+                var grid = $(this).data('gridstack');
+
+                _.each(items, function (node) {
+                    grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
+                        node.x, node.y, node.width, node.height);
+                }, this);
+            });
+
+            $('.sidebar .grid-stack-item').draggable({
+                revert: 'invalid',
+                handle: '.grid-stack-item-content',
+                scroll: false,
+                appendTo: 'body'
+            });
+        });
+    </script>
+</body>
+</html>

dist/gridstack.css

@@ -0,0 +1,387 @@
+:root .grid-stack-item > .ui-resizable-handle {
+  filter: none;
+}
+
+.grid-stack {
+  position: relative;
+}
+
+.grid-stack.grid-stack-rtl {
+  direction: ltr;
+}
+
+.grid-stack.grid-stack-rtl > .grid-stack-item {
+  direction: rtl;
+}
+
+.grid-stack .grid-stack-placeholder > .placeholder-content {
+  border: 1px dashed lightgray;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  width: auto;
+  z-index: 0 !important;
+  text-align: center;
+}
+
+.grid-stack > .grid-stack-item {
+  min-width: 8.3333333333%;
+  position: absolute;
+  padding: 0;
+}
+
+.grid-stack > .grid-stack-item > .grid-stack-item-content {
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  width: auto;
+  z-index: 0 !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+
+.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
+.grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
+  display: none;
+}
+
+.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
+  z-index: 100;
+}
+
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
+.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
+  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+  opacity: 0.8;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-se,
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+  background-position: center;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-se {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-nw {
+  cursor: nw-resize;
+  width: 20px;
+  height: 20px;
+  left: 10px;
+  top: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-n {
+  cursor: n-resize;
+  height: 10px;
+  top: 0;
+  left: 25px;
+  right: 25px;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-ne {
+  cursor: ne-resize;
+  width: 20px;
+  height: 20px;
+  right: 10px;
+  top: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-e {
+  cursor: e-resize;
+  width: 10px;
+  right: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-se {
+  cursor: se-resize;
+  width: 20px;
+  height: 20px;
+  right: 10px;
+  bottom: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-s {
+  cursor: s-resize;
+  height: 10px;
+  left: 25px;
+  bottom: 0;
+  right: 25px;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
+  cursor: sw-resize;
+  width: 20px;
+  height: 20px;
+  left: 10px;
+  bottom: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-w {
+  cursor: w-resize;
+  width: 10px;
+  left: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
+  display: none !important;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='1'] {
+  width: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='1'] {
+  left: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='1'] {
+  min-width: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='1'] {
+  max-width: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='2'] {
+  width: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='2'] {
+  left: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='2'] {
+  min-width: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='2'] {
+  max-width: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='3'] {
+  width: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='3'] {
+  left: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='3'] {
+  min-width: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='3'] {
+  max-width: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='4'] {
+  width: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='4'] {
+  left: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='4'] {
+  min-width: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='4'] {
+  max-width: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='5'] {
+  width: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='5'] {
+  left: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='5'] {
+  min-width: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='5'] {
+  max-width: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='6'] {
+  width: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='6'] {
+  left: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='6'] {
+  min-width: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='6'] {
+  max-width: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='7'] {
+  width: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='7'] {
+  left: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='7'] {
+  min-width: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='7'] {
+  max-width: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='8'] {
+  width: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='8'] {
+  left: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='8'] {
+  min-width: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='8'] {
+  max-width: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='9'] {
+  width: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='9'] {
+  left: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='9'] {
+  min-width: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='9'] {
+  max-width: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='10'] {
+  width: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='10'] {
+  left: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='10'] {
+  min-width: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='10'] {
+  max-width: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='11'] {
+  width: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='11'] {
+  left: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='11'] {
+  min-width: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='11'] {
+  max-width: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='12'] {
+  width: 100%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='12'] {
+  left: 100%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='12'] {
+  min-width: 100%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='12'] {
+  max-width: 100%;
+}
+
+.grid-stack.grid-stack-animate,
+.grid-stack.grid-stack-animate .grid-stack-item {
+  -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+}
+
+.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
+.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
+  -webkit-transition: left 0s, top 0s, height 0s, width 0s;
+  -moz-transition: left 0s, top 0s, height 0s, width 0s;
+  -ms-transition: left 0s, top 0s, height 0s, width 0s;
+  -o-transition: left 0s, top 0s, height 0s, width 0s;
+  transition: left 0s, top 0s, height 0s, width 0s;
+}
+
+.grid-stack.grid-stack-one-column-mode {
+  height: auto !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
+  position: relative !important;
+  width: auto !important;
+  left: 0 !important;
+  top: auto !important;
+  margin-bottom: 20px;
+  max-width: none !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
+  display: none;
+}

dist/gridstack.jQueryUI.js

@@ -0,0 +1,97 @@
+/**
+ * gridstack.js 0.3.0-dev
+ * http://troolee.github.io/gridstack.js/
+ * (c) 2014-2016 Pavel Reznikov, Dylan Weiss
+ * gridstack.js may be freely distributed under the MIT license.
+ * @preserve
+*/
+(function(factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery', 'lodash', 'gridstack', 'jquery-ui/data', 'jquery-ui/disable-selection', 'jquery-ui/focusable',
+            'jquery-ui/form', 'jquery-ui/ie', 'jquery-ui/keycode', 'jquery-ui/labels', 'jquery-ui/jquery-1-7',
+            'jquery-ui/plugin', 'jquery-ui/safe-active-element', 'jquery-ui/safe-blur', 'jquery-ui/scroll-parent',
+            'jquery-ui/tabbable', 'jquery-ui/unique-id', 'jquery-ui/version', 'jquery-ui/widget',
+            'jquery-ui/widgets/mouse', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable',
+            'jquery-ui/widgets/resizable'], factory);
+    } else if (typeof exports !== 'undefined') {
+        try { jQuery = require('jquery'); } catch (e) {}
+        try { _ = require('lodash'); } catch (e) {}
+        try { GridStackUI = require('gridstack'); } catch (e) {}
+        factory(jQuery, _, GridStackUI);
+    } else {
+        factory(jQuery, _, GridStackUI);
+    }
+})(function($, _, GridStackUI) {
+
+    var scope = window;
+
+    /**
+    * @class JQueryUIGridStackDragDropPlugin
+    * jQuery UI implementation of drag'n'drop gridstack plugin.
+    */
+    function JQueryUIGridStackDragDropPlugin(grid) {
+        GridStackUI.GridStackDragDropPlugin.call(this, grid);
+    }
+
+    GridStackUI.GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin);
+
+    JQueryUIGridStackDragDropPlugin.prototype = Object.create(GridStackUI.GridStackDragDropPlugin.prototype);
+    JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin;
+
+    JQueryUIGridStackDragDropPlugin.prototype.resizable = function(el, opts) {
+        el = $(el);
+        if (opts === 'disable' || opts === 'enable') {
+            el.resizable(opts);
+        } else if (opts === 'option') {
+            var key = arguments[2];
+            var value = arguments[3];
+            el.resizable(opts, key, value);
+        } else {
+            el.resizable(_.extend({}, this.grid.opts.resizable, {
+                start: opts.start || function() {},
+                stop: opts.stop || function() {},
+                resize: opts.resize || function() {}
+            }));
+        }
+        return this;
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.draggable = function(el, opts) {
+        el = $(el);
+        if (opts === 'disable' || opts === 'enable') {
+            el.draggable(opts);
+        } else {
+            el.draggable(_.extend({}, this.grid.opts.draggable, {
+                containment: this.grid.opts.isNested ? this.grid.container.parent() : null,
+                start: opts.start || function() {},
+                stop: opts.stop || function() {},
+                drag: opts.drag || function() {}
+            }));
+        }
+        return this;
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.droppable = function(el, opts) {
+        el = $(el);
+        if (opts === 'disable' || opts === 'enable') {
+            el.droppable(opts);
+        } else {
+            el.droppable({
+                accept: opts.accept
+            });
+        }
+        return this;
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.isDroppable = function(el, opts) {
+        el = $(el);
+        return Boolean(el.data('droppable'));
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {
+        $(el).on(eventName, callback);
+        return this;
+    };
+
+    return JQueryUIGridStackDragDropPlugin;
+});

dist/gridstack.jQueryUI.min.js

@@ -0,0 +1,13 @@
+/**
+ * gridstack.js 0.3.0-dev
+ * http://troolee.github.io/gridstack.js/
+ * (c) 2014-2016 Pavel Reznikov, Dylan Weiss
+ * gridstack.js may be freely distributed under the MIT license.
+ * @preserve
+*/
+!function(a){if("function"==typeof define&&define.amd)define(["jquery","lodash","gridstack","jquery-ui/data","jquery-ui/disable-selection","jquery-ui/focusable","jquery-ui/form","jquery-ui/ie","jquery-ui/keycode","jquery-ui/labels","jquery-ui/jquery-1-7","jquery-ui/plugin","jquery-ui/safe-active-element","jquery-ui/safe-blur","jquery-ui/scroll-parent","jquery-ui/tabbable","jquery-ui/unique-id","jquery-ui/version","jquery-ui/widget","jquery-ui/widgets/mouse","jquery-ui/widgets/draggable","jquery-ui/widgets/droppable","jquery-ui/widgets/resizable"],a);else if("undefined"!=typeof exports){try{jQuery=require("jquery")}catch(a){}try{_=require("lodash")}catch(a){}try{GridStackUI=require("gridstack")}catch(a){}a(jQuery,_,GridStackUI)}else a(jQuery,_,GridStackUI)}(function(a,b,c){/**
+    * @class JQueryUIGridStackDragDropPlugin
+    * jQuery UI implementation of drag'n'drop gridstack plugin.
+    */
+function d(a){c.GridStackDragDropPlugin.call(this,a)}window;return c.GridStackDragDropPlugin.registerPlugin(d),d.prototype=Object.create(c.GridStackDragDropPlugin.prototype),d.prototype.constructor=d,d.prototype.resizable=function(c,d){if(c=a(c),"disable"===d||"enable"===d)c.resizable(d);else if("option"===d){var e=arguments[2],f=arguments[3];c.resizable(d,e,f)}else c.resizable(b.extend({},this.grid.opts.resizable,{start:d.start||function(){},stop:d.stop||function(){},resize:d.resize||function(){}}));return this},d.prototype.draggable=function(c,d){return c=a(c),"disable"===d||"enable"===d?c.draggable(d):c.draggable(b.extend({},this.grid.opts.draggable,{containment:this.grid.opts.isNested?this.grid.container.parent():null,start:d.start||function(){},stop:d.stop||function(){},drag:d.drag||function(){}})),this},d.prototype.droppable=function(b,c){return b=a(b),"disable"===c||"enable"===c?b.droppable(c):b.droppable({accept:c.accept}),this},d.prototype.isDroppable=function(b,c){return b=a(b),Boolean(b.data("droppable"))},d.prototype.on=function(b,c,d){return a(b).on(c,d),this},d});
+//# sourceMappingURL=gridstack.min.map

doc/FAQ.md

@@ -0,0 +1,51 @@
+Frequently asked questions
+==========================
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
+
+- [Gridstack doesn't use bootstrap 3 classes. Why you say it's bootstrap 3 friendly.](#gridstack-doesnt-use-bootstrap-3-classes-why-you-say-its-bootstrap-3-friendly)
+- [How can I create a static layout using gridstack.](#how-can-i-create-a-static-layout-using-gridstack)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+### Gridstack doesn't use bootstrap 3 classes. Why you say it's bootstrap 3 friendly.
+
+**Q:**
+
+Original issue #390:
+
+> Hi,
+>
+> Excuse my ignorance but on your site you write "responsive bootstrap v3 friendly layouts" but how?
+>
+> In none of the examples you actually make use of any bootstrap classes. You add it to head but if you do that with gridster it works exactly the same..
+>
+> What does gridstack do different then gridster?
+>
+> Reason I'm asking is because I have bootstrap HTML templates I want to put them in the grid so users can move it all around .. then when done have a normal html page (without the draggable grid). I thought gridstack would help to do that in favor of gridster but so far I have not seen any difference between the 2..
+>
+> Thanks!
+
+**A:**
+
+We never declare that gridstack uses bootstrap classes. We say that gridstack could be responsive (widgets are not fixed width) it works well on bootstrap 3 pages with fixed or responsive layout. That's why it says bootstrap 3 friendly.
+
+It wasn't a goal for gridstack to create bootstrap 3 layouts. It's not a goal now neither. The goal of gridstack is to create dashboard layouts with draggable/resizable widgets.
+
+Gridstack uses internal grid to implement its logic. DOM nodes are just interpretation of this grid. So we or you probably could create a third party library which exports this internal grid into bootstrap 3/bootstrap 4/absolute divs/whatever layout. But I don't see this as part of gridstack core. As the same as support of angular/knockout/whatever libraries. We're doing all necessary for smooth support but it will never be a part of core.
+
+The main idea is to build as simple and flexible lib as possible.
+
+
+### How can I create a static layout using gridstack.
+
+**Q:**
+
+How can I create a static layout not using jQuery UI, etc.
+
+**A:**
+
+The main propose of gridstack is creating dashboards with draggable and/or resizable widgets. You could disable this behavior by setting `static` option. At this point you will probably
+still need to include jQuery UI. But we will try to decrease dependency of it in near future.

doc/README.md

@@ -0,0 +1,474 @@
+gridstack.js API
+================
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
+
+- [Options](#options)
+- [Grid attributes](#grid-attributes)
+- [Item attributes](#item-attributes)
+- [Events](#events)
+  - [added(event, items)](#addedevent-items)
+  - [change(event, items)](#changeevent-items)
+  - [disable(event)](#disableevent)
+  - [dragstart(event, ui)](#dragstartevent-ui)
+  - [dragstop(event, ui)](#dragstopevent-ui)
+  - [enable(event)](#enableevent)
+  - [removed(event, items)](#removedevent-items)
+  - [resizestart(event, ui)](#resizestartevent-ui)
+  - [resizestop(event, ui)](#resizestopevent-ui)
+- [API](#api)
+  - [addWidget(el[, x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])](#addwidgetel-x-y-width-height-autoposition-minwidth-maxwidth-minheight-maxheight-id)
+  - [batchUpdate()](#batchupdate)
+  - [cellHeight()](#cellheight)
+  - [cellHeight(val)](#cellheightval)
+  - [cellWidth()](#cellwidth)
+  - [commit()](#commit)
+  - [destroy([detachGrid])](#destroydetachgrid)
+  - [disable()](#disable)
+  - [enable()](#enable)
+  - [enableMove(doEnable, includeNewWidgets)](#enablemovedoenable-includenewwidgets)
+  - [enableResize(doEnable, includeNewWidgets)](#enableresizedoenable-includenewwidgets)
+  - [getCellFromPixel(position[, useOffset])](#getcellfrompixelposition-useoffset)
+  - [isAreaEmpty(x, y, width, height)](#isareaemptyx-y-width-height)
+  - [locked(el, val)](#lockedel-val)
+  - [makeWidget(el)](#makewidgetel)
+  - [maxHeight(el, val)](#maxheightel-val)
+  - [minHeight(el, val)](#minheightel-val)
+  - [maxWidth(el, val)](#maxwidthel-val)
+  - [minWidth(el, val)](#minwidthel-val)
+  - [movable(el, val)](#movableel-val)
+  - [move(el, x, y)](#moveel-x-y)
+  - [removeWidget(el[, detachNode])](#removewidgetel-detachnode)
+  - [removeAll([detachNode])](#removealldetachnode)
+  - [resize(el, width, height)](#resizeel-width-height)
+  - [resizable(el, val)](#resizableel-val)
+  - [setAnimation(doAnimate)](#setanimationdoanimate)
+  - [setGridWidth(gridWidth, doNotPropagate)](#setgridwidthgridwidth-donotpropagate)
+  - [setStatic(staticValue)](#setstaticstaticvalue)
+  - [update(el, x, y, width, height)](#updateel-x-y-width-height)
+  - [verticalMargin(value, noUpdate)](#verticalmarginvalue-noupdate)
+  - [willItFit(x, y, width, height, autoPosition)](#willitfitx-y-width-height-autoposition)
+- [Utils](#utils)
+  - [GridStackUI.Utils.sort(nodes[, dir[, width]])](#gridstackuiutilssortnodes-dir-width)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Options
+
+- `acceptWidgets` - if `true` of jquery selector the grid will accept widgets dragged from other grids or from
+ outside (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/two.html)
+- `alwaysShowResizeHandle` - if `true` the resizing handles are shown even if the user is not hovering over the widget
+    (default: `false`)
+- `animate` - turns animation on (default: `false`)
+- `auto` - if `false` gridstack will not initialize existing items (default: `true`)
+- `cellHeight` - one cell height (default: `60`). Can be:
+ - an integer (px)
+ - a string (ex: '10em', '100px', '10rem')
+ - 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
+ - `'auto'` - height will be calculated from cell width.
+- `ddPlugin` - class that implement drag'n'drop functionallity for gridstack. If `false` grid will be static. (default: `null` - first available plugin will be used)
+- `disableDrag` - disallows dragging of widgets (default: `false`).
+- `disableResize` - disallows resizing of widgets (default: `false`).
+- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}`)
+- `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
+- `handleClass` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`)
+- `height` - maximum rows amount. Default is `0` which means no maximum rows
+- `float` - enable floating widgets (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/float.html)
+- `itemClass` - widget class (default: `'grid-stack-item'`)
+- `minWidth` - minimal width. If window width is less, grid will be shown in one-column mode (default: `768`)
+- `oneColumnModeClass` - class set on grid when in one column mode (default: 'grid-stack-one-column-mode')
+- `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
+- `placeholderText` - placeholder default content (default: `''`)
+- `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
+- `removable` - if `true` widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, in this case widgets will be removed by dropping them there (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/two.html)
+- `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
+- `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](http://troolee.github.io/gridstack.js/demo/rtl.html)
+- `staticGrid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.
+- `verticalMargin` - vertical gap size (default: `20`). Can be:
+ - an integer (px)
+ - a string (ex: '2em', '20px', '2rem')
+- `width` - amount of columns (default: `12`)
+
+## Grid attributes
+
+- `data-gs-animate` - turns animation on
+- `data-gs-width` - amount of columns
+- `data-gs-height` - maximum rows amount. Default is `0` which means no maximum rows.
+- `data-gs-current-height` - current rows amount. Set by the library only. Can be used by the CSS rules.
+
+## Item attributes
+
+- `data-gs-x`, `data-gs-y` - element position
+- `data-gs-width`, `data-gs-height` - element size
+- `data-gs-max-width`, `data-gs-min-width`, `data-gs-max-height`, `data-gs-min-height` - element constraints
+- `data-gs-no-resize` - disable element resizing
+- `data-gs-no-move` - disable element moving
+- `data-gs-auto-position` - tells to ignore `data-gs-x` and `data-gs-y` attributes and to place element to the first
+    available position
+- `data-gs-locked` - the widget will be locked. It means another widget wouldn't be able to move it during dragging or resizing.
+The widget can still be dragged or resized. You need to add `data-gs-no-resize` and `data-gs-no-move` attributes
+to completely lock the widget.
+
+## Events
+
+### added(event, items)
+
+```javascript
+$('.grid-stack').on('added', function(event, items) {
+    for (var i = 0; i < items.length; i++) {
+      console.log('item added');
+      console.log(items[i]);
+    }
+});
+```
+
+### change(event, items)
+
+Occurs when adding/removing widgets or existing widgets change their position/size
+
+```javascript
+var serializeWidgetMap = function(items) {
+    console.log(items);
+};
+
+$('.grid-stack').on('change', function(event, items) {
+    serializeWidgetMap(items);
+});
+```
+
+### disable(event)
+
+```javascript
+$('.grid-stack').on('disable', function(event) {
+    var grid = event.target;
+});
+```
+
+### dragstart(event, ui)
+
+```javascript
+$('.grid-stack').on('dragstart', function(event, ui) {
+    var grid = this;
+    var element = event.target;
+});
+```
+
+### dragstop(event, ui)
+
+```javascript
+$('.grid-stack').on('dragstop', function(event, ui) {
+    var grid = this;
+    var element = event.target;
+});
+```
+
+### enable(event)
+
+```javascript
+$('.grid-stack').on('enable', function(event) {
+    var grid = event.target;
+});
+```
+
+### removed(event, items)
+
+```javascript
+$('.grid-stack').on('removed', function(event, items) {
+    for (var i = 0; i < items.length; i++) {
+      console.log('item removed');
+      console.log(items[i]);
+    }
+});
+```
+
+### resizestart(event, ui)
+
+```javascript
+$('.grid-stack').on('resizestart', function(event, ui) {
+    var grid = this;
+    var element = event.target;
+});
+```
+
+### resizestop(event, ui)
+
+```javascript
+$('.grid-stack').on('resizestop', function(event, ui) {
+    var grid = this;
+    var element = event.target;
+});
+```
+
+## API
+
+### addWidget(el[, x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])
+
+Creates new widget and returns it.
+
+Parameters:
+
+- `el` - widget to add
+- `x`, `y`, `width`, `height` - widget position/dimensions (optional)
+- `autoPosition` - if `true` then `x`, `y` parameters will be ignored and widget will be places on the first available
+position (optional)
+- `minWidth` minimum width allowed during resize/creation (optional)
+- `maxWidth` maximum width allowed during resize/creation (optional)
+- `minHeight` minimum height allowed during resize/creation (optional)
+- `maxHeight` maximum height allowed during resize/creation (optional)
+- `id` value for `data-gs-id` (optional)
+
+Widget will be always placed even if result height is more than actual grid height. You need to use `willItFit` method
+before calling `addWidget` for additional check.
+
+```javascript
+$('.grid-stack').gridstack();
+
+var grid = $('.grid-stack').data('gridstack');
+grid.addWidget(el, 0, 0, 3, 2, true);
+```
+
+### batchUpdate()
+
+Initailizes batch updates. You will see no changes until `commit` method is called.
+
+### cellHeight()
+
+Gets current cell height.
+
+### cellHeight(val)
+
+Update current cell height. This method rebuilds an internal CSS stylesheet. Note: You can expect performance issues if
+call this method too often.
+
+```javascript
+grid.cellHeight(grid.cellWidth() * 1.2);
+```
+
+### cellWidth()
+
+Gets current cell width.
+
+### commit()
+
+Finishes batch updates. Updates DOM nodes. You must call it after `batchUpdate`.
+
+### destroy([detachGrid])
+
+Destroys a grid instance.
+
+Parameters:
+
+- `detachGrid` - if `false` nodes and grid will not be removed from the DOM (Optional. Default `true`).
+
+### disable()
+
+Disables widgets moving/resizing. This is a shortcut for:
+
+```javascript
+grid.movable('.grid-stack-item', false);
+grid.resizable('.grid-stack-item', false);
+```
+
+### enable()
+
+Enables widgets moving/resizing. This is a shortcut for:
+
+```javascript
+grid.movable('.grid-stack-item', true);
+grid.resizable('.grid-stack-item', true);
+```
+
+### enableMove(doEnable, includeNewWidgets)
+
+Enables/disables widget moving. `includeNewWidgets` will force new widgets to be draggable as per `doEnable`'s value by changing the `disableDrag` grid option. This is a shortcut for:
+
+```javascript
+grid.movable(this.container.children('.' + this.opts.itemClass), doEnable);
+```
+
+### enableResize(doEnable, includeNewWidgets)
+
+Enables/disables widget resizing. `includeNewWidgets` will force new widgets to be resizable as per `doEnable`'s value by changing the `disableResize` grid option.  This is a shortcut for:
+
+```javascript
+grid.resizable(this.container.children('.' + this.opts.itemClass), doEnable);
+```
+
+### getCellFromPixel(position[, useOffset])
+
+Get the position of the cell under a pixel on screen.
+
+Parameters :
+
+- `position` - the position of the pixel to resolve in absolute coordinates, as an object with `top` and `left` properties
+- `useOffset` - if `true`, value will be based on offset vs position (Optional. Default `false`). Useful when grid is within `position: relative` element.
+
+Returns an object with properties `x` and `y` i.e. the column and row in the grid.
+
+### isAreaEmpty(x, y, width, height)
+
+Checks if specified area is empty.
+
+### locked(el, val)
+
+Locks/unlocks widget.
+
+- `el` - widget to modify.
+- `val` - if `true` widget will be locked.
+
+### makeWidget(el)
+
+If you add elements to your gridstack container by hand, you have to tell gridstack afterwards to make them widgets. If you want gridstack to add the elements for you, use `addWidget` instead.
+Makes the given element a widget and returns it.
+
+Parameters:
+
+- `el` - element to convert to a widget
+
+```javascript
+$('.grid-stack').gridstack();
+
+$('.grid-stack').append('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="1"></div>')
+var grid = $('.grid-stack').data('gridstack');
+grid.makeWidget('gsi-1');
+```
+
+### maxHeight(el, val)
+
+Set the `maxHeight` for a widget.
+
+- `el` - widget to modify.
+- `val` - A numeric value of the number of rows
+
+### minHeight(el, val)
+
+Set the `minHeight` for a widget.
+
+- `el` - widget to modify.
+- `val` - A numeric value of the number of rows
+
+### maxWidth(el, val)
+
+Set the `maxWidth` for a widget.
+
+- `el` - widget to modify.
+- `val` - A numeric value of the number of columns
+
+### minWidth(el, val)
+
+Set the `minWidth` for a widget.
+
+- `el` - widget to modify.
+- `val` - A numeric value of the number of columns
+
+### movable(el, val)
+
+Enables/Disables moving.
+
+- `el` - widget to modify
+- `val` - if `true` widget will be draggable.
+
+### move(el, x, y)
+
+Changes widget position
+
+Parameters:
+
+- `el` - widget to move
+- `x`, `y` - new position. If value is `null` or `undefined` it will be ignored.
+
+### removeWidget(el[, detachNode])
+
+Removes widget from the grid.
+
+Parameters:
+
+- `el` - widget to remove.
+- `detachNode` - if `false` node won't be removed from the DOM (Optional. Default `true`).
+
+### removeAll([detachNode])
+
+Removes all widgets from the grid.
+
+Parameters:
+
+- `detachNode` - if `false` nodes won't be removed from the DOM (Optional. Default `true`).
+
+### resize(el, width, height)
+
+Changes widget size
+
+Parameters:
+
+- `el` - widget to resize
+- `width`, `height` - new dimensions. If value is `null` or `undefined` it will be ignored.
+
+### resizable(el, val)
+
+Enables/Disables resizing.
+
+- `el` - widget to modify
+- `val` - if `true` widget will be resizable.
+
+### setAnimation(doAnimate)
+
+Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
+
+- `doAnimate` - if `true` the grid will animate.
+
+### setGridWidth(gridWidth, doNotPropagate)
+
+(Experimental) Modify number of columns in the grid. Will attempt to update existing widgets to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css`.
+
+- `gridWidth` - Integer between 1 and 12.
+- `doNotPropagate` - if true existing widgets will not be updated.
+
+### setStatic(staticValue)
+
+Toggle the grid static state.  Also toggle the `grid-stack-static` class.
+
+- `staticValue` - if `true` the grid becomes static.
+
+### update(el, x, y, width, height)
+
+Parameters:
+
+- `el` - widget to move
+- `x`, `y` - new position. If value is `null` or `undefined` it will be ignored.
+- `width`, `height` - new dimensions. If value is `null` or `undefined` it will be ignored.
+
+Updates widget position/size.
+
+### verticalMargin(value, noUpdate)
+
+Parameters:
+
+- `value` - new vertical margin value.
+- `noUpdate` - if true, styles will not be updated.
+
+### willItFit(x, y, width, height, autoPosition)
+
+Returns `true` if the `height` of the grid will be less the vertical constraint. Always returns `true` if grid doesn't
+have `height` constraint.
+
+```javascript
+if (grid.willItFit(newNode.x, newNode.y, newNode.width, newNode.height, true)) {
+    grid.addWidget(newNode.el, newNode.x, newNode.y, newNode.width, newNode.height, true);
+}
+else {
+    alert('Not enough free space to place the widget');
+}
+```
+
+
+## Utils
+
+### GridStackUI.Utils.sort(nodes[, dir[, width]])
+
+Sorts array of nodes
+
+- `nodes` - array to sort
+- `dir` - `1` for asc, `-1` for desc (optional)
+- `width` - width of the grid. If `undefined` the width will be calculated automatically (optional).

karma.conf.js

@@ -0,0 +1,81 @@
+// Karma configuration
+// Generated on Thu Feb 18 2016 22:00:23 GMT+0100 (CET)
+
+module.exports = function(config) {
+    config.set({
+
+        // base path that will be used to resolve all patterns (eg. files, exclude)
+        basePath: '',
+
+
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['jasmine'],
+
+
+        // list of files / patterns to load in the browser
+        files: [
+          'bower_components/jquery/dist/jquery.min.js',
+          'bower_components/jquery-ui/jquery-ui.min.js',
+          'bower_components/lodash/dist/lodash.min.js',
+          'src/gridstack.js',
+          'src/gridstack.jQueryUI.js',
+          'spec/*-spec.js'
+        ],
+
+
+        // list of files to exclude
+        exclude: [
+        ],
+
+
+        // preprocess matching files before serving them to the browser
+        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+            'src/gridstack.js': ['coverage'],
+            'src/gridstack.jQueryUI.js': ['coverage'],
+        },
+
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress', 'coverage', 'coveralls'],
+
+        coverageReporter: {
+            type: 'lcov', // lcov or lcovonly are required for generating lcov.info files
+            dir: 'coverage/'
+        },
+
+        // web server port
+        port: 9876,
+
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN
+        // config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+
+        // enable / disable watching file and executing tests whenever any file changes
+        autoWatch: true,
+
+
+        // start these browsers
+        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+        browsers: ['PhantomJS'],
+
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        singleRun: true,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: Infinity
+    });
+}

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "gridstack",
+  "version": "0.3.0-dev",
+  "description": "gridstack.js is a jQuery plugin for widget layout",
+  "main": "dist/gridstack.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/troolee/gridstack.js.git"
+  },
+  "scripts": {
+    "build": "grunt",
+    "test": "karma start karma.conf.js"
+  },
+  "keywords": [
+    "gridstack",
+    "grid",
+    "gridster",
+    "layout",
+    "jquery"
+  ],
+  "author": "Pavel Reznikov <pashka.reznikov@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/troolee/gridstack.js/issues"
+  },
+  "homepage": "http://troolee.github.io/gridstack.js/",
+  "dependencies": {
+    "jquery": "^3.1.0",
+    "jquery-ui": "^1.12.0",
+    "lodash": "^4.14.2"
+  },
+  "devDependencies": {
+    "connect": "^3.4.1",
+    "coveralls": "^2.11.8",
+    "doctoc": "^1.0.0",
+    "grunt": "^0.4.5",
+    "grunt-cli": "^1.2.0",
+    "grunt-contrib-connect": "^0.11.2",
+    "grunt-contrib-copy": "^0.8.2",
+    "grunt-contrib-cssmin": "^0.14.0",
+    "grunt-contrib-jshint": "^1.0.0",
+    "grunt-contrib-uglify": "^0.11.1",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-doctoc": "^0.1.1",
+    "grunt-jscs": "^2.8.0",
+    "grunt-protractor-runner": "^3.2.0",
+    "grunt-protractor-webdriver": "^0.2.5",
+    "grunt-sass": "^1.1.0",
+    "jasmine-core": "^2.4.1",
+    "karma": "^1.1.2",
+    "karma-coverage": "^1.1.1",
+    "karma-coveralls": "^1.1.2",
+    "karma-jasmine": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "phantomjs-prebuilt": "^2.1.5",
+    "serve-static": "^1.10.2"
+  }
+}

protractor.conf.js

@@ -0,0 +1,12 @@
+exports.config = {
+    seleniumAddress: 'http://localhost:4444/wd/hub',
+    specs: ['spec/e2e/*-spec.js'],
+    capabilities: {
+        browserName: 'firefox',
+        version: '',
+        platform: 'ANY',
+        loggingPrefs: {
+            browser: 'SEVERE'
+        }
+    },
+};

spec/e2e/gridstack-spec.js

@@ -0,0 +1,24 @@
+describe('gridstack.js with height', function() {
+    beforeAll(function() {
+        browser.ignoreSynchronization = true;
+    });
+
+    beforeEach(function() {
+        browser.get('http://localhost:8080/spec/e2e/html/gridstack-with-height.html');
+    });
+
+    it('shouldn\'t throw exeption when dragging widget outside the grid', function() {
+        var widget = element(by.id('item-1'));
+        var gridContainer = element(by.id('grid'));
+
+        browser.actions()
+            .mouseDown(widget, {x: 20, y: 20})
+            .mouseMove(gridContainer, {x: 300, y: 20})
+            .mouseUp()
+            .perform();
+
+        browser.manage().logs().get('browser').then(function(browserLog) {
+            expect(browserLog.length).toEqual(0);
+        });
+    });
+});

spec/e2e/html/gridstack-with-height.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>gridstack.js tests</title>
+
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../../../dist/gridstack.css"/>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../../../dist/gridstack.js"></script>
+    <script src="../../../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>gridstack.js tests</h1>
+
+        <br/>
+
+        <div class="grid-stack" id="grid">
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function() {
+            var options = {
+                height: 5
+            };
+            $('.grid-stack').gridstack(options);
+
+            new function() {
+                var items = [
+                    {x: 0, y: 0, width: 2, height: 2},
+                    {x: 2, y: 5, width: 1, height: 1}
+                ];
+
+                this.grid = $('.grid-stack').data('gridstack');
+                this.grid.removeAll();
+                items = GridStackUI.Utils.sort(items);
+                var id = 0;
+                _.each(items, function(node) {
+                    var w = $('<div><div class="grid-stack-item-content" /><div/>');
+                    w.attr('id', 'item-' + (++id));
+                    this.grid.addWidget(w,
+                        node.x, node.y, node.width, node.height);
+                }, this);
+            };
+        });
+    </script>
+</body>
+</html>

spec/gridstack-engine-spec.js

@@ -0,0 +1,311 @@
+describe('gridstack engine', function() {
+    'use strict';
+
+    var e;
+    var w;
+
+    beforeEach(function() {
+        w = window;
+        e = w.GridStackUI.Engine;
+    });
+
+    describe('test constructor', function() {
+        var engine;
+
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12);
+        });
+
+        it('should be setup properly', function() {
+            expect(engine.width).toEqual(12);
+            expect(engine.float).toEqual(false);
+            expect(engine.height).toEqual(0);
+            expect(engine.nodes).toEqual([]);
+        });
+    });
+
+    describe('test _prepareNode', function() {
+        var engine;
+
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12);
+        });
+
+        it('should prepare a node', function() {
+            expect(engine._prepareNode({}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({x: 10}, false)).toEqual(jasmine.objectContaining({x: 10, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({x: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({y: 10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 10, width: 1, height: 1}));
+            expect(engine._prepareNode({y: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({width: 3}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 3, height: 1}));
+            expect(engine._prepareNode({width: 100}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 12, height: 1}));
+            expect(engine._prepareNode({width: 0}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({width: -190}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({height: 3}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 3}));
+            expect(engine._prepareNode({height: 0}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({height: -10}, false)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+            expect(engine._prepareNode({x: 4, width: 10}, false)).toEqual(jasmine.objectContaining({x: 2, y: 0, width: 10, height: 1}));
+            expect(engine._prepareNode({x: 4, width: 10}, true)).toEqual(jasmine.objectContaining({x: 4, y: 0, width: 8, height: 1}));
+        });
+    });
+
+    describe('test isAreaEmpty', function() {
+        var engine;
+
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12, null, true);
+            engine.nodes = [
+                engine._prepareNode({x: 3, y: 2, width: 3, height: 2})
+            ];
+        });
+
+        it('should be true', function() {
+            expect(engine.isAreaEmpty(0, 0, 3, 2)).toEqual(true);
+            expect(engine.isAreaEmpty(3, 4, 3, 2)).toEqual(true);
+        });
+
+        it('should be false', function() {
+            expect(engine.isAreaEmpty(1, 1, 3, 2)).toEqual(false);
+            expect(engine.isAreaEmpty(2, 3, 3, 2)).toEqual(false);
+        });
+    });
+
+    describe('test cleanNodes/getDirtyNodes', function() {
+        var engine;
+
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12, null, true);
+            engine.nodes = [
+                engine._prepareNode({x: 0, y: 0, width: 1, height: 1, idx: 1, _dirty: true}),
+                engine._prepareNode({x: 3, y: 2, width: 3, height: 2, idx: 2, _dirty: true}),
+                engine._prepareNode({x: 3, y: 7, width: 3, height: 2, idx: 3})
+            ];
+        });
+
+        beforeEach(function() {
+            engine._updateCounter = 0;
+        });
+
+        it('should return all dirty nodes', function() {
+            var nodes = engine.getDirtyNodes();
+
+            expect(nodes.length).toEqual(2);
+            expect(nodes[0].idx).toEqual(1);
+            expect(nodes[1].idx).toEqual(2);
+        });
+
+        it('should\'n clean nodes if _updateCounter > 0', function() {
+            engine._updateCounter = 1;
+            engine.cleanNodes();
+
+            expect(engine.getDirtyNodes().length).toBeGreaterThan(0);
+        });
+
+        it('should clean all dirty nodes', function() {
+            engine.cleanNodes();
+
+            expect(engine.getDirtyNodes().length).toEqual(0);
+        });
+    });
+
+    describe('test batchUpdate/commit', function() {
+        var engine;
+
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12);
+        });
+
+        it('should work on not float grids', function() {
+            expect(engine.float).toEqual(false);
+            engine.batchUpdate();
+            expect(engine._updateCounter).toBeGreaterThan(0);
+            expect(engine.float).toEqual(true);
+            engine.commit();
+            expect(engine._updateCounter).toEqual(0);
+            expect(engine.float).toEqual(false);
+        });
+    });
+
+    describe('test batchUpdate/commit', function() {
+        var engine;
+
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12, null, true);
+        });
+
+        it('should work on float grids', function() {
+            expect(engine.float).toEqual(true);
+            engine.batchUpdate();
+            expect(engine._updateCounter).toBeGreaterThan(0);
+            expect(engine.float).toEqual(true);
+            engine.commit();
+            expect(engine._updateCounter).toEqual(0);
+            expect(engine.float).toEqual(true);
+        });
+    });
+
+    describe('test _notify', function() {
+        var engine;
+        var spy;
+
+        beforeEach(function() {
+            spy = {
+                callback: function() {}
+            };
+            spyOn(spy, 'callback');
+
+            engine = new GridStackUI.Engine(12, spy.callback, true);
+
+            engine.nodes = [
+                engine._prepareNode({x: 0, y: 0, width: 1, height: 1, idx: 1, _dirty: true}),
+                engine._prepareNode({x: 3, y: 2, width: 3, height: 2, idx: 2, _dirty: true}),
+                engine._prepareNode({x: 3, y: 7, width: 3, height: 2, idx: 3})
+            ];
+        });
+
+        it('should\'n be called if _updateCounter > 0', function() {
+            engine._updateCounter = 1;
+            engine._notify();
+
+            expect(spy.callback).not.toHaveBeenCalled();
+        });
+
+        it('should by called with dirty nodes', function() {
+            engine._notify();
+
+            expect(spy.callback).toHaveBeenCalledWith([
+                engine.nodes[0],
+                engine.nodes[1]
+            ], true);
+        });
+
+        it('should by called with extra passed node to be removed', function() {
+            var n1 = {idx: -1};
+
+            engine._notify(n1);
+
+            expect(spy.callback).toHaveBeenCalledWith([
+                n1,
+                engine.nodes[0],
+                engine.nodes[1]
+            ], true);
+        });
+
+        it('should by called with extra passed node to be removed and should maintain false parameter', function() {
+            var n1 = {idx: -1};
+
+            engine._notify(n1, false);
+
+            expect(spy.callback).toHaveBeenCalledWith([
+                n1,
+                engine.nodes[0],
+                engine.nodes[1]
+            ], false);
+        });
+    });
+
+    describe('test _packNodes', function() {
+        describe('using not float mode', function() {
+            var engine;
+
+            var findNode = function(engine, id) {
+                return _.find(engine.nodes, function(i) { return i._id === id; });
+            };
+
+            beforeEach(function() {
+                engine = new GridStackUI.Engine(12, null, false);
+            });
+
+            it('shouldn\'t pack one node with y coord eq 0', function() {
+                engine.nodes = [
+                    {x: 0, y: 0, width: 1, height: 1, _id: 1},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1}));
+                expect(findNode(engine, 1)._dirty).toBeFalsy();
+            });
+
+            it('should pack one node correctly', function() {
+                engine.nodes = [
+                    {x: 0, y: 1, width: 1, height: 1, _id: 1},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1, _dirty: true}));
+            });
+
+            it('should pack nodes correctly', function() {
+                engine.nodes = [
+                    {x: 0, y: 1, width: 1, height: 1, _id: 1},
+                    {x: 0, y: 5, width: 1, height: 1, _id: 2},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1, _dirty: true}));
+                expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1, _dirty: true}));
+            });
+
+            it('should pack nodes correctly', function() {
+                engine.nodes = [
+                    {x: 0, y: 5, width: 1, height: 1, _id: 1},
+                    {x: 0, y: 1, width: 1, height: 1, _id: 2},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1, _dirty: true}));
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1, _dirty: true}));
+            });
+
+            it('should respect locked nodes', function() {
+                engine.nodes = [
+                    {x: 0, y: 1, width: 1, height: 1, _id: 1, locked: true},
+                    {x: 0, y: 5, width: 1, height: 1, _id: 2},
+                ];
+
+                engine._packNodes();
+
+                expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1}));
+                expect(findNode(engine, 1)._dirty).toBeFalsy();
+                expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 2, width: 1, height: 1, _dirty: true}));
+            });
+        });
+    });
+
+    describe('test isNodeChangedPosition', function() {
+        var engine;
+
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12);
+        });
+
+        it('should return true for changed x', function() {
+            var widget = { x: 1, y: 2, width: 3, height: 4 };
+            expect(engine.isNodeChangedPosition(widget, 2, 2)).toEqual(true);
+        });
+
+        it('should return true for changed y', function() {
+            var widget = { x: 1, y: 2, width: 3, height: 4 };
+            expect(engine.isNodeChangedPosition(widget, 1, 1)).toEqual(true);
+        });
+
+        it('should return true for changed width', function() {
+            var widget = { x: 1, y: 2, width: 3, height: 4 };
+            expect(engine.isNodeChangedPosition(widget, 2, 2, 4, 4)).toEqual(true);
+        });
+
+        it('should return true for changed height', function() {
+            var widget = { x: 1, y: 2, width: 3, height: 4 };
+            expect(engine.isNodeChangedPosition(widget, 1, 2, 3, 3)).toEqual(true);
+        });
+
+        it('should return false for unchanged position', function() {
+            var widget = { x: 1, y: 2, width: 3, height: 4 };
+            expect(engine.isNodeChangedPosition(widget, 1, 2, 3, 4)).toEqual(false);
+        });
+    });
+});

spec/utils-spec.js

@@ -0,0 +1,109 @@
+describe('gridstack utils', function() {
+    'use strict';
+
+    var utils;
+
+    beforeEach(function() {
+        utils = window.GridStackUI.Utils;
+    });
+
+    describe('setup of utils', function() {
+
+        it('should set gridstack utils.', function() {
+            expect(utils).not.toBeNull();
+            expect(typeof utils).toBe('object');
+        });
+
+    });
+
+    describe('test toBool', function() {
+
+        it('should return booleans.', function() {
+            expect(utils.toBool(true)).toEqual(true);
+            expect(utils.toBool(false)).toEqual(false);
+        });
+
+        it('should work with integer.', function() {
+            expect(utils.toBool(1)).toEqual(true);
+            expect(utils.toBool(0)).toEqual(false);
+        });
+
+        it('should work with Strings.', function() {
+            expect(utils.toBool('')).toEqual(false);
+            expect(utils.toBool('0')).toEqual(false);
+            expect(utils.toBool('no')).toEqual(false);
+            expect(utils.toBool('false')).toEqual(false);
+            expect(utils.toBool('yes')).toEqual(true);
+            expect(utils.toBool('yadda')).toEqual(true);
+        });
+
+    });
+
+    describe('test isIntercepted', function() {
+        var src = {x: 3, y: 2, width: 3, height: 2};
+
+        it('should intercept.', function() {
+            expect(utils.isIntercepted(src, {x: 0, y: 0, width: 4, height: 3})).toEqual(true);
+            expect(utils.isIntercepted(src, {x: 0, y: 0, width: 40, height: 30})).toEqual(true);
+            expect(utils.isIntercepted(src, {x: 3, y: 2, width: 3, height: 2})).toEqual(true);
+            expect(utils.isIntercepted(src, {x: 5, y: 3, width: 3, height: 2})).toEqual(true);
+        });
+
+        it('shouldn\'t intercept.', function() {
+            expect(utils.isIntercepted(src, {x: 0, y: 0, width: 3, height: 2})).toEqual(false);
+            expect(utils.isIntercepted(src, {x: 0, y: 0, width: 13, height: 2})).toEqual(false);
+            expect(utils.isIntercepted(src, {x: 1, y: 4, width: 13, height: 2})).toEqual(false);
+            expect(utils.isIntercepted(src, {x: 0, y: 3, width: 3, height: 2})).toEqual(false);
+            expect(utils.isIntercepted(src, {x: 6, y: 3, width: 3, height: 2})).toEqual(false);
+        });
+    });
+
+    describe('test createStylesheet/removeStylesheet', function() {
+
+        it('should create/remove style DOM', function() {
+            var _id = 'test-123';
+
+            utils.createStylesheet(_id);
+
+            var style = $('STYLE[data-gs-style-id=' + _id + ']');
+
+            expect(style.length).toEqual(1);
+            expect(style.prop('tagName')).toEqual('STYLE');
+
+            utils.removeStylesheet(_id)
+
+            style = $('STYLE[data-gs-style-id=' + _id + ']');
+
+            expect(style.length).toEqual(0);
+        });
+
+    });
+
+    describe('test parseHeight', function() {
+
+        it('should parse height value', function() {
+            expect(utils.parseHeight(12)).toEqual(jasmine.objectContaining({height: 12, unit: 'px'}));
+            expect(utils.parseHeight('12px')).toEqual(jasmine.objectContaining({height: 12, unit: 'px'}));
+            expect(utils.parseHeight('12.3px')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'px'}));
+            expect(utils.parseHeight('12.3em')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'em'}));
+            expect(utils.parseHeight('12.3rem')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'rem'}));
+            expect(utils.parseHeight('12.3vh')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'vh'}));
+            expect(utils.parseHeight('12.3vw')).toEqual(jasmine.objectContaining({height: 12.3, unit: 'vw'}));
+            expect(utils.parseHeight('12.5')).toEqual(jasmine.objectContaining({height: 12.5, unit: 'px'}));
+            expect(function() { utils.parseHeight('12.5 df'); }).toThrowError('Invalid height');
+
+        });
+
+        it('should parse negative height value', function() {
+            expect(utils.parseHeight(-12)).toEqual(jasmine.objectContaining({height: -12, unit: 'px'}));
+            expect(utils.parseHeight('-12px')).toEqual(jasmine.objectContaining({height: -12, unit: 'px'}));
+            expect(utils.parseHeight('-12.3px')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'px'}));
+            expect(utils.parseHeight('-12.3em')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'em'}));
+            expect(utils.parseHeight('-12.3rem')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'rem'}));
+            expect(utils.parseHeight('-12.3vh')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'vh'}));
+            expect(utils.parseHeight('-12.3vw')).toEqual(jasmine.objectContaining({height: -12.3, unit: 'vw'}));
+            expect(utils.parseHeight('-12.5')).toEqual(jasmine.objectContaining({height: -12.5, unit: 'px'}));
+            expect(function() { utils.parseHeight('-12.5 df'); }).toThrowError('Invalid height');
+        });
+    });
+});

src/gridstack-extra.scss

@@ -0,0 +1,21 @@
+$gridstack-columns: 12 !default;
+
+@mixin grid-stack-items($gridstack-columns) {
+    .grid-stack.grid-stack-#{$gridstack-columns} {
+
+        > .grid-stack-item {
+            min-width: 100% / $gridstack-columns;
+
+            @for $i from 1 through $gridstack-columns {
+                &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
+                &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
+                &[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
+                &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+            }
+        }
+    }
+}
+
+@for $j from 1 through $gridstack-columns {
+    @include grid-stack-items($j)
+}

src/gridstack.css

@@ -1,120 +0,0 @@
-.grid-stack {
-    position: relative;
-}
-
-.grid-stack-item {
-    position: absolute;
-    padding: 0;
-}
-
-.grid-stack-item .grid-stack-item-content,
-.grid-stack-item .placeholder-content {
-    margin: 0;
-    position: absolute;
-    top: 0;
-    left: 10px;
-    right: 10px;
-    bottom: 0;
-    width: auto;
-    z-index: 0 !important;
-    overflow: auto;
-}
-
-.grid-stack-placeholder .placeholder-content {
-    border: 1px dashed lightgray;
-}
-
-.grid-stack-item.ui-draggable-dragging,
-.grid-stack-item.ui-resizable-resizing {
-    z-index: 100;
-}
-
-.grid-stack-item.ui-draggable-dragging .grid-stack-item-content,
-.grid-stack-item.ui-resizable-resizing .grid-stack-item-content {
-    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-    opacity: 0.8;
-}
-
-.grid-stack-item .ui-resizable-handle {
-    padding: 3px;
-    margin: 3px 0;
-    cursor: nwse-resize;
-    color: gray;
-
-    position: absolute;
-    bottom: 0;
-    right: 15px;
-
-    font: normal normal normal 14px/1 FontAwesome;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-
-    font-size: 10px;
-}
-
-.grid-stack-item .ui-resizable-handle::before {
-    content: "\f065";
-}
-
-.grid-stack-item[data-gs-width="12"] { width: 100% }
-.grid-stack-item[data-gs-width="11"] { width: 91.66666667% }
-.grid-stack-item[data-gs-width="10"] { width: 83.33333333% }
-.grid-stack-item[data-gs-width="9"]  { width: 75% }
-.grid-stack-item[data-gs-width="8"]  { width: 66.66666667% }
-.grid-stack-item[data-gs-width="7"]  { width: 58.33333333% }
-.grid-stack-item[data-gs-width="6"]  { width: 50% }
-.grid-stack-item[data-gs-width="5"]  { width: 41.66666667% }
-.grid-stack-item[data-gs-width="4"]  { width: 33.33333333% }
-.grid-stack-item[data-gs-width="3"]  { width: 25% }
-.grid-stack-item[data-gs-width="2"]  { width: 16.66666667% }
-.grid-stack-item[data-gs-width="1"]  { width: 8.33333333% }
-
-.grid-stack-item[data-gs-x="12"] { left: 100% }
-.grid-stack-item[data-gs-x="11"] { left: 91.66666667% }
-.grid-stack-item[data-gs-x="10"] { left: 83.33333333% }
-.grid-stack-item[data-gs-x="9"]  { left: 75% }
-.grid-stack-item[data-gs-x="8"]  { left: 66.66666667% }
-.grid-stack-item[data-gs-x="7"]  { left: 58.33333333% }
-.grid-stack-item[data-gs-x="6"]  { left: 50% }
-.grid-stack-item[data-gs-x="5"]  { left: 41.66666667% }
-.grid-stack-item[data-gs-x="4"]  { left: 33.33333333% }
-.grid-stack-item[data-gs-x="3"]  { left: 25% }
-.grid-stack-item[data-gs-x="2"]  { left: 16.66666667% }
-.grid-stack-item[data-gs-x="1"]  { left: 8.33333333% }
-
-@media (max-width: 768px) {
-    .grid-stack-item {
-        position: relative !important;
-        width: auto !important;
-        left: 0 !important;
-        top: auto !important;
-        margin-bottom: 20px;
-    }
-
-    .grid-stack {
-        height: auto !important;
-    }
-}
-
-.grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
-    -webkit-transition: left .3s, top .3s, height .3s, width .3s;
-    -moz-transition: left .3s, top .3s, height .3s, width .3s;
-    -o-transition: left .3s, top .3s, height .3s, width .3s;
-    -ms-transition: left .3s, top .3s, height .3s, width .3s;
-    transition: left .3s, top .3s, height .3s, width .3s;
-}
-/*Don't animate the placeholder or when dragging/resizing*/
-.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
-.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
-.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
-    -webkit-transition: left .0s, top .0s, height .0s, width .0s;
-    -moz-transition: left .0s, top .0s, height .0s, width .0s;
-    -o-transition: left .0s, top .0s, height .0s, width .0s;
-    transition:  left .0s, top .0s, height .0s, width .0s;
-}

src/gridstack.jQueryUI.js

@@ -0,0 +1,97 @@
+/**
+ * gridstack.js 0.3.0-dev
+ * http://troolee.github.io/gridstack.js/
+ * (c) 2014-2016 Pavel Reznikov, Dylan Weiss
+ * gridstack.js may be freely distributed under the MIT license.
+ * @preserve
+*/
+(function(factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery', 'lodash', 'gridstack', 'jquery-ui/data', 'jquery-ui/disable-selection', 'jquery-ui/focusable',
+            'jquery-ui/form', 'jquery-ui/ie', 'jquery-ui/keycode', 'jquery-ui/labels', 'jquery-ui/jquery-1-7',
+            'jquery-ui/plugin', 'jquery-ui/safe-active-element', 'jquery-ui/safe-blur', 'jquery-ui/scroll-parent',
+            'jquery-ui/tabbable', 'jquery-ui/unique-id', 'jquery-ui/version', 'jquery-ui/widget',
+            'jquery-ui/widgets/mouse', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable',
+            'jquery-ui/widgets/resizable'], factory);
+    } else if (typeof exports !== 'undefined') {
+        try { jQuery = require('jquery'); } catch (e) {}
+        try { _ = require('lodash'); } catch (e) {}
+        try { GridStackUI = require('gridstack'); } catch (e) {}
+        factory(jQuery, _, GridStackUI);
+    } else {
+        factory(jQuery, _, GridStackUI);
+    }
+})(function($, _, GridStackUI) {
+
+    var scope = window;
+
+    /**
+    * @class JQueryUIGridStackDragDropPlugin
+    * jQuery UI implementation of drag'n'drop gridstack plugin.
+    */
+    function JQueryUIGridStackDragDropPlugin(grid) {
+        GridStackUI.GridStackDragDropPlugin.call(this, grid);
+    }
+
+    GridStackUI.GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin);
+
+    JQueryUIGridStackDragDropPlugin.prototype = Object.create(GridStackUI.GridStackDragDropPlugin.prototype);
+    JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin;
+
+    JQueryUIGridStackDragDropPlugin.prototype.resizable = function(el, opts) {
+        el = $(el);
+        if (opts === 'disable' || opts === 'enable') {
+            el.resizable(opts);
+        } else if (opts === 'option') {
+            var key = arguments[2];
+            var value = arguments[3];
+            el.resizable(opts, key, value);
+        } else {
+            el.resizable(_.extend({}, this.grid.opts.resizable, {
+                start: opts.start || function() {},
+                stop: opts.stop || function() {},
+                resize: opts.resize || function() {}
+            }));
+        }
+        return this;
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.draggable = function(el, opts) {
+        el = $(el);
+        if (opts === 'disable' || opts === 'enable') {
+            el.draggable(opts);
+        } else {
+            el.draggable(_.extend({}, this.grid.opts.draggable, {
+                containment: this.grid.opts.isNested ? this.grid.container.parent() : null,
+                start: opts.start || function() {},
+                stop: opts.stop || function() {},
+                drag: opts.drag || function() {}
+            }));
+        }
+        return this;
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.droppable = function(el, opts) {
+        el = $(el);
+        if (opts === 'disable' || opts === 'enable') {
+            el.droppable(opts);
+        } else {
+            el.droppable({
+                accept: opts.accept
+            });
+        }
+        return this;
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.isDroppable = function(el, opts) {
+        el = $(el);
+        return Boolean(el.data('droppable'));
+    };
+
+    JQueryUIGridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {
+        $(el).on(eventName, callback);
+        return this;
+    };
+
+    return JQueryUIGridStackDragDropPlugin;
+});

src/gridstack.scss

@@ -0,0 +1,140 @@
+$gridstack-columns: 12 !default;
+$horizontal_padding: 20px !default;
+$vertical_padding: 20px !default;
+$animation_speed: .3s !default;
+
+@mixin vendor($property, $value...){
+    -webkit-#{$property}:$value;
+       -moz-#{$property}:$value;
+        -ms-#{$property}:$value;
+         -o-#{$property}:$value;
+            #{$property}:$value;
+}
+
+:root .grid-stack-item > .ui-resizable-handle { filter: none; }
+
+.grid-stack {
+    position: relative;
+
+    &.grid-stack-rtl {
+        direction: ltr;
+
+        > .grid-stack-item {
+            direction: rtl;
+        }
+    }
+
+    .grid-stack-placeholder > .placeholder-content {
+        border: 1px dashed lightgray;
+        margin: 0;
+        position: absolute;
+        top: 0;
+        left: $horizontal_padding / 2;
+        right: $horizontal_padding / 2;
+        bottom: 0;
+        width: auto;
+        z-index: 0 !important;
+        text-align: center;
+    }
+
+    > .grid-stack-item {
+        min-width: 100% / $gridstack-columns;
+        position: absolute;
+        padding: 0;
+
+        > .grid-stack-item-content {
+            margin: 0;
+            position: absolute;
+            top: 0;
+            left: $horizontal_padding / 2;
+            right: $horizontal_padding / 2;
+            bottom: 0;
+            width: auto;
+            z-index: 0 !important;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+
+        > .ui-resizable-handle {
+            position: absolute;
+            font-size: 0.1px;
+            display: block;
+            -ms-touch-action: none;
+            touch-action: none;
+        }
+
+        &.ui-resizable-disabled > .ui-resizable-handle,
+        &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
+
+        &.ui-draggable-dragging,
+        &.ui-resizable-resizing {
+            z-index: 100;
+
+            > .grid-stack-item-content,
+            > .grid-stack-item-content {
+                box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+                opacity: 0.8;
+            }
+        }
+
+        > .ui-resizable-se,
+        > .ui-resizable-sw {
+            background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
+            background-repeat: no-repeat;
+            background-position: center;
+            @include vendor(transform, rotate(45deg));
+        }
+
+        > .ui-resizable-se {
+            @include vendor(transform, rotate(-45deg));
+        }
+
+
+        > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; }
+        > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
+        > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; }
+        > .ui-resizable-e  { cursor: e-resize;  width: 10px; right: $horizontal_padding / 2; top: 15px; bottom: 15px; }
+        > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; }
+        > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
+        > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; }
+        > .ui-resizable-w  { cursor: w-resize;  width: 10px; left: $horizontal_padding / 2; top: 15px; bottom: 15px; }
+
+        &.ui-draggable-dragging {
+            &> .ui-resizable-handle {
+                display: none !important;
+            }
+        }
+
+        @for $i from 1 through $gridstack-columns {
+            &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
+            &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
+            &[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
+            &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+        }
+    }
+
+    &.grid-stack-animate,
+    &.grid-stack-animate .grid-stack-item {
+        @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
+    }
+
+    &.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+    &.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
+    &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
+        @include vendor(transition, left .0s, top .0s, height .0s, width .0s);
+    }
+    
+	&.grid-stack-one-column-mode {
+		height: auto !important;
+		&> .grid-stack-item {
+	        position: relative !important;
+	        width: auto !important;
+	        left: 0 !important;
+	        top: auto !important;
+	        margin-bottom: $vertical_padding;
+	        max-width: none !important;
+
+	        &> .ui-resizable-handle { display: none; }
+		}
+	}
+}