build js

Merge pull request #535 from troolee/releases
Releases
2016-10-03 13:44:18 -07:00 · 2016-10-03 13:42:17 -07:00 · 2016-10-03 13:40:58 -07:00 · 2016-10-03 13:39:39 -07:00 · 2016-10-03 13:35:04 -07:00 · 2016-10-03 13:34:40 -07:00
39 changed files with 5974 additions and 1465 deletions
--- a/.bithoundrc
+++ b/.bithoundrc
@ -0,0 +1,15 @@
+{
+	"ignore": [
+		"dist/**",
+		"**/node_modules/**",
+		"**/bower_components/**",
+		"**/demo/**",
+		"**/coverage/**"
+	],
+	"test": [
+		"**/spec/**"
+	],
+	"critics": {
+		"lint": "jshint"
+	}
+}
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,4 @@
 node_modules
+bower_components
+coverage
+*.log
--- a/.jscsrc
+++ b/.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/*"]
+}
--- a/.travis.yml
+++ b/.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=
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -1,9 +1,16 @@
-module.exports = function (grunt) {
+// 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: {
@ -30,7 +37,8 @@ module.exports = function (grunt) {
        copy: {
            dist: {
                files: {
-                    'dist/gridstack.js': ['src/gridstack.js']
+                    'dist/gridstack.js': ['src/gridstack.js'],
+                    'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'],
                }
            }
        },
@ -38,11 +46,14 @@ module.exports = function (grunt) {
        uglify: {
            options: {
                sourceMap: true,
-                sourceMapName: 'dist/gridstack.min.map'
+                sourceMapName: 'dist/gridstack.min.map',
+                preserveComments: 'some'
            },
            dist: {
                files: {
-                    'dist/gridstack.min.js': ['src/gridstack.js']
+                    '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']
                }
            }
        },
@ -52,10 +63,77 @@ module.exports = function (grunt) {
                removeAd: false
            },
            readme: {
-                target: "./README.md"
+                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', 'copy', 'uglify', 'doctoc']);
+    grunt.registerTask('default', ['sass', 'cssmin', 'jshint', 'jscs', 'copy', 'uglify', 'doctoc']);
+    grunt.registerTask('e2e-test', ['connect', 'protractor_webdriver', 'protractor']);
 };
--- a/3
+++ b/3
@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2014-2016 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.
-
--- a/README.md
+++ b/README.md
@ -1,11 +1,16 @@
 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) and
-touch devices.
+[![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)

-Inspired by [gridster.js](http://gridster.net). Built with love.
+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

@ -18,45 +23,13 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
 - [Demo](#demo)
 - [Usage](#usage)
  - [Requirements](#requirements)
+      - [Using gridstack.js with jQuery UI](#using-gridstackjs-with-jquery-ui)
+  - [Install](#install)
  - [Basic usage](#basic-usage)
-  - [Options](#options)
-  - [Grid attributes](#grid-attributes)
-  - [Item attributes](#item-attributes)
-  - [Events](#events)
-    - [onchange(items)](#onchangeitems)
-    - [ondragstart(event, ui)](#ondragstartevent-ui)
-    - [ondragstop(event, ui)](#ondragstopevent-ui)
-    - [onresizestart(event, ui)](#onresizestartevent-ui)
-    - [onresizestop(event, ui)](#onresizestopevent-ui)
-    - [disable(event)](#disableevent)
-    - [enable(event)](#enableevent)
-  - [API](#api)
-    - [add_widget(el, x, y, width, height, auto_position)](#add_widgetel-x-y-width-height-auto_position)
-    - [make_widget(el)](#make_widgetel)
-    - [batch_update()](#batch_update)
-    - [cell_height()](#cell_height)
-    - [cell_height(val)](#cell_heightval)
-    - [cell_width()](#cell_width)
-    - [commit()](#commit)
-    - [destroy()](#destroy)
-    - [disable()](#disable)
-    - [enable()](#enable)
-    - [get_cell_from_pixel(position)](#get_cell_from_pixelposition)
-    - [is_area_empty(x, y, width, height)](#is_area_emptyx-y-width-height)
-    - [locked(el, val)](#lockedel-val)
-    - [min_width(el, val)](#min_widthel-val)
-    - [min_height(el, val)](#min_heightel-val)
-    - [movable(el, val)](#movableel-val)
-    - [move(el, x, y)](#moveel-x-y)
-    - [remove_widget(el, detach_node)](#remove_widgetel-detach_node)
-    - [remove_all()](#remove_all)
-    - [resize(el, width, height)](#resizeel-width-height)
-    - [resizable(el, val)](#resizableel-val)
-    - [set_static(static_value)](#set_staticstatic_value)
-    - [update(el, x, y, width, height)](#updateel-x-y-width-height)
-    - [will_it_fit(x, y, width, height, auto_position)](#will_it_fitx-y-width-height-auto_position)
-  - [Utils](#utils)
-    - [GridStackUI.Utils.sort(nodes[, dir[, width]])](#gridstackuiutilssortnodes-dir-width)
+  - [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)
@ -68,8 +41,15 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
  - [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)
@ -84,7 +64,7 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
 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
@ -92,14 +72,47 @@ Usage

 ## Requirements

-* [lodash.js](https://lodash.com) (>= 3.5.0)
-* [jQuery](http://jquery.com) (>= 1.11.0)
-* [jQuery UI](http://jqueryui.com) (>= 1.11.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable
-* (Optional) [knockout.js](http://knockoutjs.com) (>= 3.2.0)
-* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
+* [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
@ -119,329 +132,49 @@ Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) inst
 <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

- `always_show_resize_handle` - 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`)
- `cell_height` - one cell height (default: `60`)
- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: true, appendTo: 'body'}`)
- `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
- `handle_class` - 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)
- `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. You need also update your css file (`@media (max-width: 768px) {...}`) with corresponding value (default: `768`)
- `placeholder_class` - class for placeholder (default: `'grid-stack-placeholder'`)
- `placeholder_text` - placeholder default content (default: `''`)
- `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
- `static_grid` - 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.
- `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.
-
-## 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
-
-### onchange(items)
-
-Occurs when adding/removing widgets or existing widgets change their position/size
-
-```javascript
-var serialize_widget_map = function (items) {
-    console.log(items);
-};
-
-$('.grid-stack').on('change', function (e, items) {
-    serialize_widget_map(items);
-});
+```html
+<script src="gridstack.js"></script>
+<script src="gridstack.jQueryUI.js"></script>
 ```

-### ondragstart(event, ui)
+or

-```javascript
-$('.grid-stack').on('dragstart', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
+```html
+<script src="gridstack.all.js"></script>
 ```

-### ondragstop(event, ui)
+We're working on implementing support for other drag'n'drop libraries through the new plugin system.

-```javascript
-$('.grid-stack').on('dragstop', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
-```
+## Migrating to v0.2.5

-### onresizestart(event, ui)
+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.

-```javascript
-$('.grid-stack').on('resizestart', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
-```
+## API Documentation

-### onresizestop(event, ui)
+Please check out `doc/README.md` for more information about gridstack.js API.

-```javascript
-$('.grid-stack').on('resizestop', function (event, ui) {
-    var grid = this;
-    var element = event.target;
-});
-```
+## Questions and Answers

-### disable(event)
+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.

-```javascipt
-$('.grid-stack').on('disable', function(event) {
-    var grid = event.target;
-});
-```
-
-### enable(event)
-
-```javascipt
-$('.grid-stack').on('enable', function(event) {
-    var grid = event.target;
-});
-```
-
-## API
-
-### add_widget(el, x, y, width, height, auto_position)
-
-Creates new widget and returns it.
-
-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 is more than actual grid height. You need to use `will_it_fit` method
-before calling `add_widget` for additional check.
-
-```javascript
-$('.grid-stack').gridstack();
-
-var grid = $('.grid-stack').data('gridstack');
-grid.add_widget(el, 0, 0, 3, 2, true);
-```
-
-### make_widget(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 `add_widget` 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.make_widget('gsi-1');
-```
-
-### batch_update()
-
-Initailizes batch updates. You will see no changes until `commit` method is called.
-
-### cell_height()
-
-Gets current cell height.
-
-### cell_height(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.cell_height(grid.cell_width() * 1.2);
-```
-
-### cell_width()
-
-Gets current cell width.
-
-### commit()
-
-Finishes batch updates. Updates DOM nodes. You must call it after `batch_update`.
-
-### destroy()
-
-Destroys a grid instance.
-
-### 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);
-```
-
-### get_cell_from_pixel(position)
-
-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
-
-Returns an object with properties `x` and `y` i.e. the column and row in the grid.
-
-### is_area_empty(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.
-
-### min_width(el, val)
-
-Set the minWidth for a widget.
-
- `el` - widget to modify.
- `val` - A numeric value of the number of columns
-
-### min_height(el, val)
-
-Set the minHeight for a widget.
-
- `el` - widget to modify.
- `val` - A numeric value of the number of rows
-
-### 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.
-
-### remove_widget(el, detach_node)
-
-Removes widget from the grid.
-
-Parameters:
-
- `el` - widget to remove.
- `detach_node` - if `false` DOM node won't be removed from the tree (Optional. Default `true`).
-
-### 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.
-
-### resizable(el, val)
-
-Enables/Disables resizing.
-
- `el` - widget to modify
- `val` - if `true` widget will be resizable.
-
-### set_static(static_value)
-
-Toggle the grid static state.  Also toggle the `grid-stack-static` class.
-
- `static_value` - if `true` the grid become 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.
-
-### 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.el, 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 (optional)
- `width` - width of the grid. If `undefined` the width will be calculated automatically (optional).
+Also please check our FAQ `doc/FAQ.md` before asking in case the answer is already there.

 ## Touch devices support

@ -457,17 +190,19 @@ working on touch-based devices.
 <script src="gridstack.js"></script>
 ```

-Also `always_show_resize_handle` option may be useful:
+Also `alwaysShowResizeHandle` option may be useful:

 ```javascript
 $(function () {
    var options = {
-        always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+        alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    };
    $('.grid-stack').gridstack(options);
 });
 ```

+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
@ -487,9 +222,9 @@ ko.components.register('dashboard-grid', {
                    }

                    var item = _.find(items, function (i) { return i.nodeType == 1 });
-                    grid.add_widget(item);
+                    grid.addWidget(item);
                    ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
-                        grid.remove_widget(item);
+                        grid.removeWidget(item);
                    });
                };
            };
@ -500,7 +235,7 @@ ko.components.register('dashboard-grid', {
    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" 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> '
@ -533,11 +268,11 @@ See examples: [example 1](http://troolee.github.io/gridstack.js/demo/knockout.ht

 **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.auto_position}">',
+        '   <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>
@ -665,10 +400,10 @@ var serialization = [
 serialization = GridStackUI.Utils.sort(serialization);

 var grid = $('.grid-stack').data('gridstack');
-grid.remove_all();
+grid.removeAll();

 _.each(serialization, function (node) {
-    grid.add_widget($('<div><div class="grid-stack-item-content" /></div>'),
+    grid.addWidget($('<div><div class="grid-stack-item-content" /></div>'),
        node.x, node.y, node.width, node.height);
 });
 ```
@ -737,6 +472,12 @@ for i in range(N):
 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

@ -745,9 +486,67 @@ 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.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
@ -755,7 +554,9 @@ Changes
 - add `min_width`/`min_height` methods (Thanks to @cvillemure)
 - add `destroy` method (Thanks to @zspitzer)
 - add `placeholder_text` option (Thanks to @slauyama)
- lodash v 4.x support (Thanks to Andy Robbins)
+- add `handle_class` option.
+- add `make_widget` method.
+- lodash v 4.x support (Thanks to @andrewr88)

 #### v0.2.3 (2015-06-23)

@ -814,7 +615,7 @@ License

 The MIT License (MIT)

-Copyright (c) 2014-2016 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
--- a/bower.json
+++ b/bower.json
@ -1,6 +1,6 @@
 {
  "name": "gridstack",
-  "version": "0.2.4",
+  "version": "0.3.0-dev",
  "homepage": "https://github.com/troolee/gridstack.js",
  "authors": [
    "Pavel Reznikov <pashka.reznikov@gmail.com>"
@ -14,9 +14,9 @@
    "amd"
  ],
  "dependencies": {
-    "lodash": ">= 3.5.0",
-    "jquery": ">= 1.11.0",
-    "jquery-ui": ">= 1.11.0"
+    "lodash": ">= 4.14.2",
+    "jquery": ">= 3.1.0",
+    "jquery-ui": ">= 1.12.0"
  },
  "keywords": [
    "gridstack",
--- a/demo/anijs.html
+++ b/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>
--- a/demo/float.html
+++ b/demo/float.html
@ -10,15 +10,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Float grid demo</title>

-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <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="//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="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 {
@ -68,18 +68,19 @@

                this.grid = $('.grid-stack').data('gridstack');

-                this.add_new_widget = function () {
+                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.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
+                    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.add_new_widget);
+                $('#add-new-widget').click(this.addNewWidget);
            };
        });
    </script>
--- a/demo/index.html
+++ b/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>
--- a/demo/knockout.html
+++ b/demo/knockout.html
@ -10,16 +10,16 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Knockout.js demo</title>

-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <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="//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="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <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 {
@ -38,7 +38,7 @@
        <h1>knockout.js Demo</h1>

        <div>
-            <button data-bind="click: add_new_widget">Add new widget</button>
+            <button data-bind="click: addNewWidget">Add new widget</button>
        </div>

        <br>
@ -64,9 +64,9 @@
                            }

                            var item = _.find(items, function (i) { return i.nodeType == 1 });
-                            grid.add_widget(item);
+                            grid.addWidget(item);
                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
-                                grid.remove_widget(item);
+                                grid.removeWidget(item);
                            });
                        };
                    };
@ -78,7 +78,7 @@
                [
                    '<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.delete_widget">Delete me</button></div>',
+                    '       <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
                    '   </div>',
                    '</div> '
                ].join('')
@ -90,7 +90,7 @@

                this.widgets = ko.observableArray(widgets);

-                this.add_new_widget = function () {
+                this.addNewWidget = function () {
                    this.widgets.push({
                        x: 0,
                        y: 0,
@ -98,10 +98,12 @@
                        height: Math.floor(1 + 3 * Math.random()),
                        auto_position: true
                    });
+                    return false;
                };

-                this.delete_widget = function (item) {
+                this.deleteWidget = function (item) {
                    self.widgets.remove(item);
+                    return false;
                };
            };

--- a/demo/knockout2.html
+++ b/demo/knockout2.html
@ -10,16 +10,16 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Knockout.js demo</title>

-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <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="//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="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <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 {
@ -38,7 +38,7 @@
        <h1>knockout.js Demo</h1>

        <div>
-            <button data-bind="click: add_new_widget">Add new widget</button>
+            <button data-bind="click: addNewWidget">Add new widget</button>
        </div>

        <br>
@ -64,9 +64,9 @@
                            }

                            var item = _.find(items, function (i) { return i.nodeType == 1 });
-                            grid.add_widget(item);
+                            grid.addWidget(item);
                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
-                                grid.remove_widget(item);
+                                grid.removeWidget(item);
                            });
                        };
                    };
@ -83,7 +83,7 @@

                this.widgets = ko.observableArray(widgets);

-                this.add_new_widget = function () {
+                this.addNewWidget = function () {
                    this.widgets.push({
                        x: 0,
                        y: 0,
@ -91,10 +91,12 @@
                        height: Math.floor(1 + 3 * Math.random()),
                        auto_position: true
                    });
+                    return false;
                };

-                this.delete_widget = function (item) {
+                this.deleteWidget = function (item) {
                    self.widgets.remove(item);
+                    return false;
                };
            };

@ -113,7 +115,7 @@
    <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.delete_widget">Delete me</button></div>
+               <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>
--- a/demo/nested.html
+++ b/demo/nested.html
@ -10,15 +10,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nested grids demo</title>

-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <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="//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="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 {
--- a/demo/responsive.html
+++ b/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>
--- a/demo/rtl.html
+++ b/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>
--- a/demo/serialization.html
+++ b/demo/serialization.html
@ -10,15 +10,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Serialization demo</title>

-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <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="//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="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 {
@ -56,12 +56,11 @@
    <script type="text/javascript">
        $(function () {
            var options = {
-                static_grid: true
            };
            $('.grid-stack').gridstack(options);

            new function () {
-                this.serialized_data = [
+                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},
@ -74,17 +73,18 @@

                this.grid = $('.grid-stack').data('gridstack');

-                this.load_grid = function () {
-                    this.grid.remove_all();
-                    var items = GridStackUI.Utils.sort(this.serialized_data);
+                this.loadGrid = function () {
+                    this.grid.removeAll();
+                    var items = GridStackUI.Utils.sort(this.serializedData);
                    _.each(items, function (node) {
-                        this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
+                        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.save_grid = function () {
-                    this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
+                this.saveGrid = function () {
+                    this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
                        el = $(el);
                        var node = el.data('_gridstack_node');
                        return {
@ -94,18 +94,20 @@
                            height: node.height
                        };
                    }, this);
-                    $('#saved-data').val(JSON.stringify(this.serialized_data, null, '    '));
+                    $('#saved-data').val(JSON.stringify(this.serializedData, null, '    '));
+                    return false;
                }.bind(this);

-                this.clear_grid = function () {
-                    this.grid.remove_all();
+                this.clearGrid = function () {
+                    this.grid.removeAll();
+                    return false;
                }.bind(this);

-                $('#save-grid').click(this.save_grid);
-                $('#load-grid').click(this.load_grid);
-                $('#clear-grid').click(this.clear_grid);
+                $('#save-grid').click(this.saveGrid);
+                $('#load-grid').click(this.loadGrid);
+                $('#clear-grid').click(this.clearGrid);

-                this.load_grid();
+                this.loadGrid();
            };
        });
    </script>
--- a/demo/two.html
+++ b/demo/two.html
@ -10,16 +10,16 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Two grids demo</title>

-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <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="//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="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 {
@ -35,12 +35,61 @@
            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">
@ -58,10 +107,15 @@
        $(function () {
            var options = {
                width: 6,
-                float: true
+                float: false,
+                removable: '.trash',
+                removeTimeout: 100,
+                acceptWidgets: '.grid-stack-item'
            };
            $('#grid1').gridstack(options);
-            $('#grid2').gridstack(options);
+            $('#grid2').gridstack(_.defaults({
+                float: true
+            }, options));

            var items = [
                {x: 0, y: 0, width: 2, height: 2},
@ -75,10 +129,17 @@
                var grid = $(this).data('gridstack');

                _.each(items, function (node) {
-                    grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
+                    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>
--- a/dist/gridstack.all.js
+++ b/dist/gridstack.all.js
--- a/dist/gridstack.css
+++ b/dist/gridstack.css
@ -6,6 +6,14 @@
  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;
@ -64,29 +72,22 @@

 .grid-stack > .grid-stack-item > .ui-resizable-se,
 .grid-stack > .grid-stack-item > .ui-resizable-sw {
-  text-align: right;
-  color: gray;
-  padding: 2px 3px 0 0;
-  margin: 0;
-  font: normal normal normal 10px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.grid-stack > .grid-stack-item > .ui-resizable-se::before,
-.grid-stack > .grid-stack-item > .ui-resizable-sw::before {
-  content: "\f065";
+  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 {
-  display: inline-block;
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  transform: rotate(90deg);
+  -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 {
@ -153,6 +154,10 @@
  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%;
 }
@ -364,25 +369,19 @@
  transition: left 0s, top 0s, height 0s, width 0s;
 }

-/** Uncomment this to show bottom-left resize handle **/
-/*
-.grid-stack > .grid-stack-item > .ui-resizable-sw {
-    display: inline-block;
-    @include vendor(transform, rotate(180deg));
+.grid-stack.grid-stack-one-column-mode {
+  height: auto !important;
 }
-*/
-@media (max-width: 768px) {
-  .grid-stack-item {
-    position: relative !important;
-    width: auto !important;
-    left: 0 !important;
-    top: auto !important;
-    margin-bottom: 20px;
-  }
-  .grid-stack-item .ui-resizable-handle {
-    display: none;
-  }
-  .grid-stack {
-    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;
 }
--- a/dist/gridstack.jQueryUI.js
+++ b/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;
+});
--- a/dist/gridstack.jQueryUI.min.js
+++ b/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
--- a/dist/gridstack.js
+++ b/dist/gridstack.js
--- a/dist/gridstack.min.css
+++ b/dist/gridstack.min.css
--- a/dist/gridstack.min.js
+++ b/dist/gridstack.min.js
--- a/dist/gridstack.min.map
+++ b/dist/gridstack.min.map
--- a/doc/FAQ.md
+++ b/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.
--- a/doc/README.md
+++ b/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).
--- a/karma.conf.js
+++ b/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
+    });
+}
--- a/package.json
+++ b/package.json
@ -1,12 +1,16 @@
 {
  "name": "gridstack",
-  "version": "0.2.4",
+  "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",
@ -20,12 +24,35 @@
    "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-uglify": "^0.10.1",
+    "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",
-    "grunt-doctoc": "^0.1.1"
+    "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"
  }
 }
--- a/protractor.conf.js
+++ b/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'
+        }
+    },
+};
--- a/spec/e2e/gridstack-spec.js
+++ b/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);
+        });
+    });
+});
--- a/spec/e2e/html/gridstack-with-height.html
+++ b/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>
--- a/spec/gridstack-engine-spec.js
+++ b/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);
+        });
+    });
+});
--- a/spec/gridstack-spec.js
+++ b/spec/gridstack-spec.js
--- a/spec/utils-spec.js
+++ b/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');
+        });
+    });
+});
--- a/src/gridstack.jQueryUI.js
+++ b/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;
+});
--- a/src/gridstack.js
+++ b/src/gridstack.js
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@ -16,6 +16,14 @@ $animation_speed: .3s !default;
 .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;
@ -71,26 +79,17 @@ $animation_speed: .3s !default;

        > .ui-resizable-se,
        > .ui-resizable-sw {
-            text-align: right;
-            color: gray;
-
-            padding: 2px 3px 0 0;
-            margin: 0;
-
-            font: normal normal normal 10px/1 FontAwesome;
-            font-size: inherit;
-            text-rendering: auto;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-
-            &::before { content: "\f065"; }
+            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 {
-            display: inline-block;
-            @include vendor(transform, rotate(90deg));
+            @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; }
@ -100,6 +99,12 @@ $animation_speed: .3s !default;
        > .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; }
@ -118,26 +123,18 @@ $animation_speed: .3s !default;
    &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
        @include vendor(transition, left .0s, top .0s, height .0s, width .0s);
    }
-}
-
-/** Uncomment this to show bottom-left resize handle **/
-/*
-.grid-stack > .grid-stack-item > .ui-resizable-sw {
-    display: inline-block;
-    @include vendor(transform, rotate(180deg));
-}
-*/
-
-@media (max-width: 768px) {
-    .grid-stack-item {
-        position: relative !important;
-        width: auto !important;
-        left: 0 !important;
-        top: auto !important;
-        margin-bottom: $vertical_padding;
-
-        .ui-resizable-handle { display: none; }
-    }
-
-    .grid-stack { height: auto !important; }
+    
+	&.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; }
+		}
+	}
 }