build js

Releases

Gruntfile.js

@@ -37,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'],
                 }
             }
         },
@@ -50,7 +51,9 @@ module.exports = function(grunt) {
             },
             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']
                 }
             }
         },

LICENSE

@@ -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.
-

README.md

@@ -23,8 +23,10 @@ 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)
+  - [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)
@@ -45,7 +47,7 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
   - [Using AniJS](#using-anijs)
 - [The Team](#the-team)
 - [Changes](#changes)
-      - [v0.2.6 (Development version)](#v027-dev-development-version)
+      - [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)
@@ -72,18 +74,27 @@ Usage
 
 * [lodash.js](https://lodash.com) (>= 3.5.0, full build)
 * [jQuery](http://jquery.com) (>= 3.1.0)
-* [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
 
 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.5/gridstack.min.css" />
-<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js'></script>
+<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:
@@ -129,6 +140,25 @@ $(function () {
 </script>
 ```
 
+## Migrating to v0.3.0
+
+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.
+
+To ensure gridstack continues to work, either include the additional `gridstack.jQueryUI.js` file into your HTML or use `gridstack.all.js`:
+
+```html
+<script src="gridstack.js"></script>
+<script src="gridstack.jQueryUI.js"></script>
+```
+
+or
+
+```html
+<script src="gridstack.all.js"></script>
+```
+
+We're working on implementing support for other drag'n'drop libraries through the new plugin system.
+
 ## Migrating to v0.2.5
 
 As of v0.2.5 all methods and parameters are in camel case to respect [JavaScript Style Guide and Coding Conventions](http://www.w3schools.com/js/js_conventions.asp).
@@ -171,6 +201,8 @@ $(function () {
 });
 ```
 
+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
@@ -475,6 +507,14 @@ 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+).
@@ -575,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

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "0.2.6",
+  "version": "0.3.0-dev",
   "homepage": "https://github.com/troolee/gridstack.js",
   "authors": [
     "Pavel Reznikov <pashka.reznikov@gmail.com>"

demo/anijs.html

@@ -20,6 +20,7 @@
     <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 {

demo/float.html

@@ -18,6 +18,7 @@
     <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 {

demo/knockout.html

@@ -19,6 +19,7 @@
     <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 {

demo/knockout2.html

@@ -19,6 +19,7 @@
     <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 {

demo/nested.html

@@ -18,6 +18,7 @@
     <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 {

demo/responsive.html

@@ -19,6 +19,7 @@
     <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 {
@@ -117,6 +118,5 @@
             };
         });
     </script>
-    </script>
 </body>
 </html>

demo/rtl.html

@@ -19,6 +19,7 @@
     <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 {

demo/serialization.html

@@ -18,6 +18,7 @@
     <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 {

demo/two.html

@@ -19,6 +19,7 @@
     <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 {

dist/gridstack.css

@@ -369,18 +369,19 @@
   transition: left 0s, top 0s, height 0s, width 0s;
 }
 
-@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 {
+  height: auto !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
+  position: relative !important;
+  width: auto !important;
+  left: 0 !important;
+  top: auto !important;
+  margin-bottom: 20px;
+  max-width: none !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
+  display: none;
 }

dist/gridstack.jQueryUI.js

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

dist/gridstack.jQueryUI.min.js

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

dist/gridstack.js

@@ -1,18 +1,13 @@
 /**
- * gridstack.js 0.2.6
+ * gridstack.js 0.3.0-dev
  * http://troolee.github.io/gridstack.js/
- * (c) 2014-2016 Pavel Reznikov
+ * (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', '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);
+        define(['jquery', 'lodash'], factory);
     } else if (typeof exports !== 'undefined') {
         try { jQuery = require('jquery'); } catch (e) {}
         try { _ = require('lodash'); } catch (e) {}
@@ -124,6 +119,41 @@
     Utils.insert_css_rule = obsolete(Utils.insertCSSRule, 'insert_css_rule', 'insertCSSRule');
     // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
 
+    /**
+    * @class GridStackDragDropPlugin
+    * Base class for drag'n'drop plugin.
+    */
+    function GridStackDragDropPlugin(grid) {
+        this.grid = grid;
+    }
+
+    GridStackDragDropPlugin.registeredPlugins = [];
+
+    GridStackDragDropPlugin.registerPlugin = function(pluginClass) {
+        GridStackDragDropPlugin.registeredPlugins.push(pluginClass);
+    };
+
+    GridStackDragDropPlugin.prototype.resizable = function(el, opts) {
+        return this;
+    };
+
+    GridStackDragDropPlugin.prototype.draggable = function(el, opts) {
+        return this;
+    };
+
+    GridStackDragDropPlugin.prototype.droppable = function(el, opts) {
+        return this;
+    };
+
+    GridStackDragDropPlugin.prototype.isDroppable = function(el) {
+        return false;
+    };
+
+    GridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {
+        return this;
+    };
+
+
     var idSeq = 0;
 
     var GridStackEngine = function(width, onchange, floatMode, height, items) {
@@ -351,6 +381,9 @@
     };
 
     GridStackEngine.prototype.canMoveNode = function(node, x, y, width, height) {
+        if (!this.isNodeChangedPosition(node, x, y, width, height)) {
+            return false;
+        }
         var hasLocked = Boolean(_.find(this.nodes, function(n) { return n.locked; }));
 
         if (!this.height && !hasLocked) {
@@ -406,7 +439,27 @@
         return clone.getGridHeight() <= this.height;
     };
 
+    GridStackEngine.prototype.isNodeChangedPosition = function(node, x, y, width, height) {
+        if (typeof x != 'number') { x = node.x; }
+        if (typeof y != 'number') { y = node.y; }
+        if (typeof width != 'number') { width = node.width; }
+        if (typeof height != 'number') { height = node.height; }
+
+        if (typeof node.maxWidth != 'undefined') { width = Math.min(width, node.maxWidth); }
+        if (typeof node.maxHeight != 'undefined') { height = Math.min(height, node.maxHeight); }
+        if (typeof node.minWidth != 'undefined') { width = Math.max(width, node.minWidth); }
+        if (typeof node.minHeight != 'undefined') { height = Math.max(height, node.minHeight); }
+
+        if (node.x == x && node.y == y && node.width == width && node.height == height) {
+            return false;
+        }
+        return true;
+    };
+
     GridStackEngine.prototype.moveNode = function(node, x, y, width, height, noPack) {
+        if (!this.isNodeChangedPosition(node, x, y, width, height)) {
+            return node;
+        }
         if (typeof x != 'number') { x = node.x; }
         if (typeof y != 'number') { y = node.y; }
         if (typeof width != 'number') { width = node.width; }
@@ -429,6 +482,11 @@
         node.width = width;
         node.height = height;
 
+        node.lastTriedX = x;
+        node.lastTriedY = y;
+        node.lastTriedWidth = width;
+        node.lastTriedHeight = height;
+
         node = this._prepareNode(node, resizing);
 
         this._fixCollisions(node);
@@ -547,9 +605,19 @@
             removable: false,
             removeTimeout: 2000,
             verticalMarginUnit: 'px',
-            cellHeightUnit: 'px'
+            cellHeightUnit: 'px',
+            oneColumnModeClass: opts.oneColumnModeClass || 'grid-stack-one-column-mode',
+            ddPlugin: null
         });
 
+        if (this.opts.ddPlugin === false) {
+            this.opts.ddPlugin = GridStackDragDropPlugin;
+        } else if (this.opts.ddPlugin === null) {
+            this.opts.ddPlugin = _.first(GridStackDragDropPlugin.registeredPlugins) || GridStackDragDropPlugin;
+        }
+
+        this.dd = new this.opts.ddPlugin(this);
+
         if (this.opts.rtl === 'auto') {
             this.opts.rtl = this.container.css('direction') === 'rtl';
         }
@@ -635,7 +703,7 @@
                 if (oneColumnMode) {
                     return;
                 }
-
+                self.container.addClass(self.opts.oneColumnModeClass);
                 oneColumnMode = true;
 
                 self.grid._sortNodes();
@@ -646,10 +714,10 @@
                         return;
                     }
                     if (node.noMove || self.opts.disableDrag) {
-                        node.el.draggable('disable');
+                        self.dd.draggable(node.el, 'disable');
                     }
                     if (node.noResize || self.opts.disableResize) {
-                        node.el.resizable('disable');
+                        self.dd.resizable(node.el, 'disable');
                     }
 
                     node.el.trigger('resize');
@@ -659,6 +727,7 @@
                     return;
                 }
 
+                self.container.removeClass(self.opts.oneColumnModeClass);
                 oneColumnMode = false;
 
                 if (self.opts.staticGrid) {
@@ -667,10 +736,10 @@
 
                 _.each(self.grid.nodes, function(node) {
                     if (!node.noMove && !self.opts.disableDrag) {
-                        node.el.draggable('enable');
+                        self.dd.draggable(node.el, 'enable');
                     }
                     if (!node.noResize && !self.opts.disableResize) {
-                        node.el.resizable('enable');
+                        self.dd.resizable(node.el, 'enable');
                     }
 
                     node.el.trigger('resize');
@@ -683,13 +752,13 @@
 
         if (!self.opts.staticGrid && typeof self.opts.removable === 'string') {
             var trashZone = $(self.opts.removable);
-            if (!trashZone.data('droppable')) {
-                trashZone.droppable({
+            if (!this.dd.isDroppable(trashZone)) {
+                this.dd.droppable(trashZone, {
                     accept: '.' + self.opts.itemClass
                 });
             }
-            trashZone
-                .on('dropover', function(event, ui) {
+            this.dd
+                .on(trashZone, 'dropover', function(event, ui) {
                     var el = $(ui.draggable);
                     var node = el.data('_gridstack_node');
                     if (node._grid !== self) {
@@ -697,7 +766,7 @@
                     }
                     self._setupRemovingTimeout(el);
                 })
-                .on('dropout', function(event, ui) {
+                .on(trashZone, 'dropout', function(event, ui) {
                     var el = $(ui.draggable);
                     var node = el.data('_gridstack_node');
                     if (node._grid !== self) {
@@ -747,16 +816,18 @@
                 }
             };
 
-            $(self.container).droppable({
-                accept: function(el) {
-                    el = $(el);
-                    var node = el.data('_gridstack_node');
-                    if (node && node._grid === self) {
-                        return false;
+            this.dd
+                .droppable(self.container, {
+                    accept: function(el) {
+                        el = $(el);
+                        var node = el.data('_gridstack_node');
+                        if (node && node._grid === self) {
+                            return false;
+                        }
+                        return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
                     }
-                    return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
-                },
-                over: function(event, ui) {
+                })
+                .on(self.container, 'dropover', function(event, ui) {
                     var offset = self.container.offset();
                     var el = $(ui.draggable);
                     var cellWidth = self.cellWidth();
@@ -773,8 +844,8 @@
                     el.data('_gridstack_node_orig', origNode);
 
                     el.on('drag', onDrag);
-                },
-                out: function(event, ui) {
+                })
+                .on(self.container, 'dropout', function(event, ui) {
                     var el = $(ui.draggable);
                     el.unbind('drag', onDrag);
                     var node = el.data('_gridstack_node');
@@ -783,8 +854,8 @@
                     self.placeholder.detach();
                     self._updateContainerHeight();
                     el.data('_gridstack_node', el.data('_gridstack_node_orig'));
-                },
-                drop: function(event, ui) {
+                })
+                .on(self.container, 'drop', function(event, ui) {
                     self.placeholder.detach();
 
                     var node = $(ui.draggable).data('_gridstack_node');
@@ -811,8 +882,7 @@
                     self._triggerChangeEvent();
 
                     self.grid.endUpdate();
-                }
-            });
+                });
         }
     };
 
@@ -1030,10 +1100,18 @@
                     return;
                 }
             }
-
-            if (!self.grid.canMoveNode(node, x, y, width, height)) {
+            // width and height are undefined if not resizing
+            var lastTriedWidth = typeof width !== 'undefined' ? width : node.lastTriedWidth;
+            var lastTriedHeight = typeof height !== 'undefined' ? height : node.lastTriedHeight;
+            if (!self.grid.canMoveNode(node, x, y, width, height) ||
+                (node.lastTriedX === x && node.lastTriedY === y &&
+                node.lastTriedWidth === lastTriedWidth && node.lastTriedHeight === lastTriedHeight)) {
                 return;
             }
+            node.lastTriedX = x;
+            node.lastTriedY = y;
+            node.lastTriedWidth = width;
+            node.lastTriedHeight = height;
             self.grid.moveNode(node, x, y, width, height);
             self._updateContainerHeight();
         };
@@ -1056,8 +1134,8 @@
             node._beforeDragX = node.x;
             node._beforeDragY = node.y;
 
-            el.resizable('option', 'minWidth', cellWidth * (node.minWidth || 1));
-            el.resizable('option', 'minHeight', strictCellHeight * (node.minHeight || 1));
+            self.dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1));
+            self.dd.resizable(el, 'option', 'minHeight', strictCellHeight * (node.minHeight || 1));
 
             if (event.type == 'resizestart') {
                 o.find('.grid-stack-item').trigger('resizestart');
@@ -1114,25 +1192,24 @@
             }
         };
 
-        el
-            .draggable(_.extend({}, this.opts.draggable, {
-                containment: this.opts.isNested ? this.container.parent() : null,
+        this.dd
+            .draggable(el, {
                 start: onStartMoving,
                 stop: onEndMoving,
                 drag: dragOrResize
-            }))
-            .resizable(_.extend({}, this.opts.resizable, {
+            })
+            .resizable(el, {
                 start: onStartMoving,
                 stop: onEndMoving,
                 resize: dragOrResize
-            }));
+            });
 
         if (node.noMove || this._isOneColumnMode() || this.opts.disableDrag) {
-            el.draggable('disable');
+            this.dd.draggable(el, 'disable');
         }
 
         if (node.noResize || this._isOneColumnMode() || this.opts.disableResize) {
-            el.resizable('disable');
+            this.dd.resizable(el, 'disable');
         }
 
         el.attr('data-gs-locked', node.locked ? 'yes' : null);
@@ -1266,9 +1343,9 @@
 
             node.noResize = !(val || false);
             if (node.noResize || self._isOneColumnMode()) {
-                el.resizable('disable');
+                self.dd.resizable(el, 'disable');
             } else {
-                el.resizable('enable');
+                self.dd.resizable(el, 'enable');
             }
         });
         return this;
@@ -1286,10 +1363,10 @@
 
             node.noMove = !(val || false);
             if (node.noMove || self._isOneColumnMode()) {
-                el.draggable('disable');
+                self.dd.draggable(el, 'disable');
                 el.removeClass('ui-draggable-handle');
             } else {
-                el.draggable('enable');
+                self.dd.draggable(el, 'enable');
                 el.addClass('ui-draggable-handle');
             }
         });
@@ -1645,6 +1722,7 @@
 
     scope.GridStackUI.Utils = Utils;
     scope.GridStackUI.Engine = GridStackEngine;
+    scope.GridStackUI.GridStackDragDropPlugin = GridStackDragDropPlugin;
 
     $.fn.gridstack = function(opts) {
         return this.each(function() {

doc/README.md

@@ -68,6 +68,7 @@ gridstack.js API
  - 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'}`)
@@ -76,7 +77,8 @@ gridstack.js API
 - `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. You need also update your css file (`@media (max-width: 768px) {...}`) with corresponding value (default: `768`)
+- `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'}`)

karma.conf.js

@@ -19,6 +19,7 @@ module.exports = function(config) {
           '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'
         ],
 
@@ -31,7 +32,8 @@ module.exports = function(config) {
         // 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.js': ['coverage'],
+            'src/gridstack.jQueryUI.js': ['coverage'],
         },
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "0.2.6",
+  "version": "0.3.0-dev",
   "description": "gridstack.js is a jQuery plugin for widget layout",
   "main": "dist/gridstack.js",
   "repository": {

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

@@ -18,6 +18,7 @@
     <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 {

spec/gridstack-engine-spec.js

@@ -14,7 +14,7 @@ describe('gridstack engine', function() {
 
         beforeAll(function() {
             engine = new GridStackUI.Engine(12);
-        })
+        });
 
         it('should be setup properly', function() {
             expect(engine.width).toEqual(12);
@@ -29,7 +29,7 @@ describe('gridstack engine', function() {
 
         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}));
@@ -57,7 +57,7 @@ describe('gridstack engine', function() {
             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);
@@ -108,14 +108,14 @@ describe('gridstack engine', function() {
         });
     });
 
-    describe('test batchUpdate/commit', function () {
+    describe('test batchUpdate/commit', function() {
         var engine;
 
-        beforeAll(function () {
-            engine = new GridStackUI.Engine(12)
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12);
         });
 
-        it('should work on not float grids', function () {
+        it('should work on not float grids', function() {
             expect(engine.float).toEqual(false);
             engine.batchUpdate();
             expect(engine._updateCounter).toBeGreaterThan(0);
@@ -126,14 +126,14 @@ describe('gridstack engine', function() {
         });
     });
 
-    describe('test batchUpdate/commit', function () {
+    describe('test batchUpdate/commit', function() {
         var engine;
 
-        beforeAll(function () {
-            engine = new GridStackUI.Engine(12, null, true)
+        beforeAll(function() {
+            engine = new GridStackUI.Engine(12, null, true);
         });
 
-        it('should work on float grids', function () {
+        it('should work on float grids', function() {
             expect(engine.float).toEqual(true);
             engine.batchUpdate();
             expect(engine._updateCounter).toBeGreaterThan(0);
@@ -150,8 +150,8 @@ describe('gridstack engine', function() {
 
         beforeEach(function() {
             spy = {
-                callback: function () {}
-            }
+                callback: function() {}
+            };
             spyOn(spy, 'callback');
 
             engine = new GridStackUI.Engine(12, spy.callback, true);
@@ -204,19 +204,19 @@ describe('gridstack engine', function() {
         });
     });
 
-    describe('test _packNodes', function () {
-        describe('using not float mode', function () {
+    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 });
-            }
+            var findNode = function(engine, id) {
+                return _.find(engine.nodes, function(i) { return i._id === id; });
+            };
 
-            beforeEach(function () {
+            beforeEach(function() {
                 engine = new GridStackUI.Engine(12, null, false);
             });
 
-            it('shouldn\'t pack one node with y coord eq 0', function () {
+            it('shouldn\'t pack one node with y coord eq 0', function() {
                 engine.nodes = [
                     {x: 0, y: 0, width: 1, height: 1, _id: 1},
                 ];
@@ -227,7 +227,7 @@ describe('gridstack engine', function() {
                 expect(findNode(engine, 1)._dirty).toBeFalsy();
             });
 
-            it('should pack one node correctly', function () {
+            it('should pack one node correctly', function() {
                 engine.nodes = [
                     {x: 0, y: 1, width: 1, height: 1, _id: 1},
                 ];
@@ -237,7 +237,7 @@ describe('gridstack engine', function() {
                 expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 0, width: 1, height: 1, _dirty: true}));
             });
 
-            it('should pack nodes correctly', function () {
+            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},
@@ -249,7 +249,7 @@ describe('gridstack engine', function() {
                 expect(findNode(engine, 2)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1, _dirty: true}));
             });
 
-            it('should pack nodes correctly', function () {
+            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},
@@ -261,7 +261,7 @@ describe('gridstack engine', function() {
                 expect(findNode(engine, 1)).toEqual(jasmine.objectContaining({x: 0, y: 1, width: 1, height: 1, _dirty: true}));
             });
 
-            it('should respect locked nodes', function () {
+            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},
@@ -275,4 +275,37 @@ describe('gridstack engine', function() {
             });
         });
     });
+
+    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);
+        });
+    });
 });

src/gridstack.jQueryUI.js

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

src/gridstack.js

@@ -1,18 +1,13 @@
 /**
- * gridstack.js 0.2.6
+ * gridstack.js 0.3.0-dev
  * http://troolee.github.io/gridstack.js/
- * (c) 2014-2016 Pavel Reznikov
+ * (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', '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);
+        define(['jquery', 'lodash'], factory);
     } else if (typeof exports !== 'undefined') {
         try { jQuery = require('jquery'); } catch (e) {}
         try { _ = require('lodash'); } catch (e) {}
@@ -124,6 +119,41 @@
     Utils.insert_css_rule = obsolete(Utils.insertCSSRule, 'insert_css_rule', 'insertCSSRule');
     // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
 
+    /**
+    * @class GridStackDragDropPlugin
+    * Base class for drag'n'drop plugin.
+    */
+    function GridStackDragDropPlugin(grid) {
+        this.grid = grid;
+    }
+
+    GridStackDragDropPlugin.registeredPlugins = [];
+
+    GridStackDragDropPlugin.registerPlugin = function(pluginClass) {
+        GridStackDragDropPlugin.registeredPlugins.push(pluginClass);
+    };
+
+    GridStackDragDropPlugin.prototype.resizable = function(el, opts) {
+        return this;
+    };
+
+    GridStackDragDropPlugin.prototype.draggable = function(el, opts) {
+        return this;
+    };
+
+    GridStackDragDropPlugin.prototype.droppable = function(el, opts) {
+        return this;
+    };
+
+    GridStackDragDropPlugin.prototype.isDroppable = function(el) {
+        return false;
+    };
+
+    GridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {
+        return this;
+    };
+
+
     var idSeq = 0;
 
     var GridStackEngine = function(width, onchange, floatMode, height, items) {
@@ -351,6 +381,9 @@
     };
 
     GridStackEngine.prototype.canMoveNode = function(node, x, y, width, height) {
+        if (!this.isNodeChangedPosition(node, x, y, width, height)) {
+            return false;
+        }
         var hasLocked = Boolean(_.find(this.nodes, function(n) { return n.locked; }));
 
         if (!this.height && !hasLocked) {
@@ -406,7 +439,27 @@
         return clone.getGridHeight() <= this.height;
     };
 
+    GridStackEngine.prototype.isNodeChangedPosition = function(node, x, y, width, height) {
+        if (typeof x != 'number') { x = node.x; }
+        if (typeof y != 'number') { y = node.y; }
+        if (typeof width != 'number') { width = node.width; }
+        if (typeof height != 'number') { height = node.height; }
+
+        if (typeof node.maxWidth != 'undefined') { width = Math.min(width, node.maxWidth); }
+        if (typeof node.maxHeight != 'undefined') { height = Math.min(height, node.maxHeight); }
+        if (typeof node.minWidth != 'undefined') { width = Math.max(width, node.minWidth); }
+        if (typeof node.minHeight != 'undefined') { height = Math.max(height, node.minHeight); }
+
+        if (node.x == x && node.y == y && node.width == width && node.height == height) {
+            return false;
+        }
+        return true;
+    };
+
     GridStackEngine.prototype.moveNode = function(node, x, y, width, height, noPack) {
+        if (!this.isNodeChangedPosition(node, x, y, width, height)) {
+            return node;
+        }
         if (typeof x != 'number') { x = node.x; }
         if (typeof y != 'number') { y = node.y; }
         if (typeof width != 'number') { width = node.width; }
@@ -429,6 +482,11 @@
         node.width = width;
         node.height = height;
 
+        node.lastTriedX = x;
+        node.lastTriedY = y;
+        node.lastTriedWidth = width;
+        node.lastTriedHeight = height;
+
         node = this._prepareNode(node, resizing);
 
         this._fixCollisions(node);
@@ -547,9 +605,19 @@
             removable: false,
             removeTimeout: 2000,
             verticalMarginUnit: 'px',
-            cellHeightUnit: 'px'
+            cellHeightUnit: 'px',
+            oneColumnModeClass: opts.oneColumnModeClass || 'grid-stack-one-column-mode',
+            ddPlugin: null
         });
 
+        if (this.opts.ddPlugin === false) {
+            this.opts.ddPlugin = GridStackDragDropPlugin;
+        } else if (this.opts.ddPlugin === null) {
+            this.opts.ddPlugin = _.first(GridStackDragDropPlugin.registeredPlugins) || GridStackDragDropPlugin;
+        }
+
+        this.dd = new this.opts.ddPlugin(this);
+
         if (this.opts.rtl === 'auto') {
             this.opts.rtl = this.container.css('direction') === 'rtl';
         }
@@ -635,7 +703,7 @@
                 if (oneColumnMode) {
                     return;
                 }
-
+                self.container.addClass(self.opts.oneColumnModeClass);
                 oneColumnMode = true;
 
                 self.grid._sortNodes();
@@ -646,10 +714,10 @@
                         return;
                     }
                     if (node.noMove || self.opts.disableDrag) {
-                        node.el.draggable('disable');
+                        self.dd.draggable(node.el, 'disable');
                     }
                     if (node.noResize || self.opts.disableResize) {
-                        node.el.resizable('disable');
+                        self.dd.resizable(node.el, 'disable');
                     }
 
                     node.el.trigger('resize');
@@ -659,6 +727,7 @@
                     return;
                 }
 
+                self.container.removeClass(self.opts.oneColumnModeClass);
                 oneColumnMode = false;
 
                 if (self.opts.staticGrid) {
@@ -667,10 +736,10 @@
 
                 _.each(self.grid.nodes, function(node) {
                     if (!node.noMove && !self.opts.disableDrag) {
-                        node.el.draggable('enable');
+                        self.dd.draggable(node.el, 'enable');
                     }
                     if (!node.noResize && !self.opts.disableResize) {
-                        node.el.resizable('enable');
+                        self.dd.resizable(node.el, 'enable');
                     }
 
                     node.el.trigger('resize');
@@ -683,13 +752,13 @@
 
         if (!self.opts.staticGrid && typeof self.opts.removable === 'string') {
             var trashZone = $(self.opts.removable);
-            if (!trashZone.data('droppable')) {
-                trashZone.droppable({
+            if (!this.dd.isDroppable(trashZone)) {
+                this.dd.droppable(trashZone, {
                     accept: '.' + self.opts.itemClass
                 });
             }
-            trashZone
-                .on('dropover', function(event, ui) {
+            this.dd
+                .on(trashZone, 'dropover', function(event, ui) {
                     var el = $(ui.draggable);
                     var node = el.data('_gridstack_node');
                     if (node._grid !== self) {
@@ -697,7 +766,7 @@
                     }
                     self._setupRemovingTimeout(el);
                 })
-                .on('dropout', function(event, ui) {
+                .on(trashZone, 'dropout', function(event, ui) {
                     var el = $(ui.draggable);
                     var node = el.data('_gridstack_node');
                     if (node._grid !== self) {
@@ -747,16 +816,18 @@
                 }
             };
 
-            $(self.container).droppable({
-                accept: function(el) {
-                    el = $(el);
-                    var node = el.data('_gridstack_node');
-                    if (node && node._grid === self) {
-                        return false;
+            this.dd
+                .droppable(self.container, {
+                    accept: function(el) {
+                        el = $(el);
+                        var node = el.data('_gridstack_node');
+                        if (node && node._grid === self) {
+                            return false;
+                        }
+                        return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
                     }
-                    return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets);
-                },
-                over: function(event, ui) {
+                })
+                .on(self.container, 'dropover', function(event, ui) {
                     var offset = self.container.offset();
                     var el = $(ui.draggable);
                     var cellWidth = self.cellWidth();
@@ -773,8 +844,8 @@
                     el.data('_gridstack_node_orig', origNode);
 
                     el.on('drag', onDrag);
-                },
-                out: function(event, ui) {
+                })
+                .on(self.container, 'dropout', function(event, ui) {
                     var el = $(ui.draggable);
                     el.unbind('drag', onDrag);
                     var node = el.data('_gridstack_node');
@@ -783,8 +854,8 @@
                     self.placeholder.detach();
                     self._updateContainerHeight();
                     el.data('_gridstack_node', el.data('_gridstack_node_orig'));
-                },
-                drop: function(event, ui) {
+                })
+                .on(self.container, 'drop', function(event, ui) {
                     self.placeholder.detach();
 
                     var node = $(ui.draggable).data('_gridstack_node');
@@ -811,8 +882,7 @@
                     self._triggerChangeEvent();
 
                     self.grid.endUpdate();
-                }
-            });
+                });
         }
     };
 
@@ -1030,10 +1100,18 @@
                     return;
                 }
             }
-
-            if (!self.grid.canMoveNode(node, x, y, width, height)) {
+            // width and height are undefined if not resizing
+            var lastTriedWidth = typeof width !== 'undefined' ? width : node.lastTriedWidth;
+            var lastTriedHeight = typeof height !== 'undefined' ? height : node.lastTriedHeight;
+            if (!self.grid.canMoveNode(node, x, y, width, height) ||
+                (node.lastTriedX === x && node.lastTriedY === y &&
+                node.lastTriedWidth === lastTriedWidth && node.lastTriedHeight === lastTriedHeight)) {
                 return;
             }
+            node.lastTriedX = x;
+            node.lastTriedY = y;
+            node.lastTriedWidth = width;
+            node.lastTriedHeight = height;
             self.grid.moveNode(node, x, y, width, height);
             self._updateContainerHeight();
         };
@@ -1056,8 +1134,8 @@
             node._beforeDragX = node.x;
             node._beforeDragY = node.y;
 
-            el.resizable('option', 'minWidth', cellWidth * (node.minWidth || 1));
-            el.resizable('option', 'minHeight', strictCellHeight * (node.minHeight || 1));
+            self.dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minWidth || 1));
+            self.dd.resizable(el, 'option', 'minHeight', strictCellHeight * (node.minHeight || 1));
 
             if (event.type == 'resizestart') {
                 o.find('.grid-stack-item').trigger('resizestart');
@@ -1114,25 +1192,24 @@
             }
         };
 
-        el
-            .draggable(_.extend({}, this.opts.draggable, {
-                containment: this.opts.isNested ? this.container.parent() : null,
+        this.dd
+            .draggable(el, {
                 start: onStartMoving,
                 stop: onEndMoving,
                 drag: dragOrResize
-            }))
-            .resizable(_.extend({}, this.opts.resizable, {
+            })
+            .resizable(el, {
                 start: onStartMoving,
                 stop: onEndMoving,
                 resize: dragOrResize
-            }));
+            });
 
         if (node.noMove || this._isOneColumnMode() || this.opts.disableDrag) {
-            el.draggable('disable');
+            this.dd.draggable(el, 'disable');
         }
 
         if (node.noResize || this._isOneColumnMode() || this.opts.disableResize) {
-            el.resizable('disable');
+            this.dd.resizable(el, 'disable');
         }
 
         el.attr('data-gs-locked', node.locked ? 'yes' : null);
@@ -1266,9 +1343,9 @@
 
             node.noResize = !(val || false);
             if (node.noResize || self._isOneColumnMode()) {
-                el.resizable('disable');
+                self.dd.resizable(el, 'disable');
             } else {
-                el.resizable('enable');
+                self.dd.resizable(el, 'enable');
             }
         });
         return this;
@@ -1286,10 +1363,10 @@
 
             node.noMove = !(val || false);
             if (node.noMove || self._isOneColumnMode()) {
-                el.draggable('disable');
+                self.dd.draggable(el, 'disable');
                 el.removeClass('ui-draggable-handle');
             } else {
-                el.draggable('enable');
+                self.dd.draggable(el, 'enable');
                 el.addClass('ui-draggable-handle');
             }
         });
@@ -1645,6 +1722,7 @@
 
     scope.GridStackUI.Utils = Utils;
     scope.GridStackUI.Engine = GridStackEngine;
+    scope.GridStackUI.GridStackDragDropPlugin = GridStackDragDropPlugin;
 
     $.fn.gridstack = function(opts) {
         return this.each(function() {

src/gridstack.scss

@@ -123,18 +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);
     }
-}
-
-@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; }
+		}
+	}
 }