fixed compatibility issues with the helper:clone option of Draggable

dist/jquery.gridster.css

@@ -21,28 +21,29 @@
   background: rgba(0,0,0,.23);
 }
 
-.ready .gs_w:not(.player):not(.preview-holder) {
+.ready .gs_w:not(.player):not(.preview-holder):not(.ui-draggable-dragging) {
   -webkit-transition: left .3s, top .3s;
   -moz-transition: left .3s, top .3s;
   -o-transition: left .3s, top .3s;
 }
 
-.gridster.dragging .support-grid {
+.gridster.dragging .ui-sortable-helper {
-  z-index: 5;
+  z-index: 9;
-}
-
-.gridster.dragging .ui-sortable-helper{
-  z-index: 10;
 }
 
 .gridster .preview-holder {
-    border: 2px dashed #333 ;
+    border: 2px dashed #333;
     border-radius: 5px;
     z-index: 1;
     background:#FFF;
     position: absolute;
 }
 
-.gridster .player {
+.gridster .ui-draggable-dragging {
-  z-index: 10!important;
+    z-index: 10!important;
 }
+
+ /*uncomment this if you draggable.helper option to "clone"*/
+/*.gridster .player {
+  display: none!important;
+}*/

dist/jquery.gridster.js

@@ -327,7 +327,8 @@
 
     var throttle = function(func, wait) {
         var context, args, timeout, throttling, more, result;
-        var whenDone = debounce(function(){ more = throttling = false; }, wait, true);
+        var whenDone = debounce(
+            function(){ more = throttling = false; }, wait, true);
         return function() {
           context = this; args = arguments;
           var later = function() {
@@ -507,7 +508,8 @@
 
 
     /**
-    * Creates the grid coords object representing the widget a add it to the mapped array of positions
+    * Creates the grid coords object representing the widget a add it to the
+    * mapped array of positions.
     *
     * @method register_widget
     * @return {Array} Returns the instance of the Gridster class.
@@ -601,6 +603,9 @@
             // containment : this.$wrapper,
             start: function(event, ui) {
                 self.$player = $(this);
+                self.$helper = self.options.draggable.helper === 'clone' ?
+                    $(ui.helper) : self.$player;
+
                 self.on_start_drag.call(self, event, ui);
             },
             stop: function(event, ui) {
@@ -631,7 +636,6 @@
         this.player_grid_data = this.$player.coords().grid;
         this.placeholder_grid_data = $.extend({}, this.player_grid_data);
 
-
         //set new grid height along the dragging period
         this.$el.css('height', this.$el.height() +
           (this.player_grid_data.size_y * this.min_widget_height));
@@ -639,14 +643,17 @@
         var colliders = this.faux_grid;
         var coords = this.$player.data('coords').coords;
 
-        this.cells_occupied_by_player = this.get_cells_occupied(this.player_grid_data);
+        this.cells_occupied_by_player = this.get_cells_occupied(
-        this.cells_occupied_by_placeholder = this.get_cells_occupied(this.placeholder_grid_data);
+            this.player_grid_data);
+        this.cells_occupied_by_placeholder = this.get_cells_occupied(
+            this.placeholder_grid_data);
 
         this.last_cols = [];
         this.last_rows = [];
 
         // see jquery.collision.js
-        this.drag_api = this.$player.collision(colliders, this.options.collision);
+        this.drag_api = this.$helper.collision(
+            colliders, this.options.collision);
 
         this.$preview_holder = $('<li />', {
               'class': 'preview-holder',
@@ -711,7 +718,7 @@
             this.on_stop_overlapping_row
         );
 
-        this.$player.attr({
+        this.$player.add(this.$helper).attr({
             'data-col': this.placeholder_grid_data.col,
             'data-row': this.placeholder_grid_data.row
         }).css({
@@ -907,7 +914,8 @@
 
 
     /**
-    * Sorts an Array of grid coords objects (representing the grid coords of each widget) in ascending way.
+    * Sorts an Array of grid coords objects (representing the grid coords of
+    * each widget) in ascending way.
     *
     * @method sort_by_row_asc
     * @param {Array} widgets Array of grid coords objects
@@ -926,7 +934,8 @@
 
 
     /**
-    * Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.
+    * Sorts an Array of grid coords objects (representing the grid coords of
+    * each widget) in descending way.
     *
     * @method sort_by_row_desc
     * @param {Array} widgets Array of grid coords objects
@@ -944,7 +953,8 @@
 
 
     /**
-    * Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.
+    * Sorts an Array of grid coords objects (representing the grid coords of
+    * each widget) in descending way.
     *
     * @method manage_movements
     * @param {HTMLElements} $widgets A jQuery collection of HTMLElements
@@ -1001,7 +1011,7 @@
     fn.is_player = function(col_or_el, row) {
         if (row && !this.gridmap[col_or_el]) { return false; }
         var $w = row ? this.gridmap[col_or_el][row] : col_or_el;
-        return $w && $w.is(this.$player);
+        return $w && ($w.is(this.$player) || $w.is(this.$helper));
     };
 
 
@@ -1183,7 +1193,8 @@
 
         if (moved_down || changed_column) {
             $nexts.each($.proxy(function(i, widget){
-                this.move_widget_up( $(widget) , this.placeholder_grid_data.col - col + phgd.size_y );
+                this.move_widget_up(
+                    $(widget), this.placeholder_grid_data.col - col + phgd.size_y);
             }, this));
         }
 
@@ -1215,7 +1226,8 @@
 
             while (--r > 0){
                 if (this.is_empty(tcol, r) || this.is_player(tcol, r) ||
-                    this.is_widget(tcol, r) && grid_col[r].is($widgets_under_player)
+                    this.is_widget(tcol, r) &&
+                    grid_col[r].is($widgets_under_player)
                 ) {
                     upper_rows[tcol].push(r);
                     min_row = r < min_row ? r : min_row;

src/jquery.gridster.css

@@ -17,28 +17,29 @@
   background: rgba(0,0,0,.23);
 }
 
-.ready .gs_w:not(.player):not(.preview-holder) {
+.ready .gs_w:not(.player):not(.preview-holder):not(.ui-draggable-dragging) {
   -webkit-transition: left .3s, top .3s;
   -moz-transition: left .3s, top .3s;
   -o-transition: left .3s, top .3s;
 }
 
-.gridster.dragging .support-grid {
+.gridster.dragging .ui-sortable-helper {
-  z-index: 5;
+  z-index: 9;
-}
-
-.gridster.dragging .ui-sortable-helper{
-  z-index: 10;
 }
 
 .gridster .preview-holder {
-    border: 2px dashed #333 ;
+    border: 2px dashed #333;
     border-radius: 5px;
     z-index: 1;
     background:#FFF;
     position: absolute;
 }
 
-.gridster .player {
+.gridster .ui-draggable-dragging {
-  z-index: 10!important;
+    z-index: 10!important;
 }
+
+ /*uncomment this if you draggable.helper option to "clone"*/
+/*.gridster .player {
+  display: none!important;
+}*/

src/jquery.gridster.js

@@ -49,7 +49,8 @@
 
     var throttle = function(func, wait) {
         var context, args, timeout, throttling, more, result;
-        var whenDone = debounce(function(){ more = throttling = false; }, wait, true);
+        var whenDone = debounce(
+            function(){ more = throttling = false; }, wait, true);
         return function() {
           context = this; args = arguments;
           var later = function() {
@@ -229,7 +230,8 @@
 
 
     /**
-    * Creates the grid coords object representing the widget a add it to the mapped array of positions
+    * Creates the grid coords object representing the widget a add it to the
+    * mapped array of positions.
     *
     * @method register_widget
     * @return {Array} Returns the instance of the Gridster class.
@@ -323,6 +325,9 @@
             // containment : this.$wrapper,
             start: function(event, ui) {
                 self.$player = $(this);
+                self.$helper = self.options.draggable.helper === 'clone' ?
+                    $(ui.helper) : self.$player;
+
                 self.on_start_drag.call(self, event, ui);
             },
             stop: function(event, ui) {
@@ -353,7 +358,6 @@
         this.player_grid_data = this.$player.coords().grid;
         this.placeholder_grid_data = $.extend({}, this.player_grid_data);
 
-
         //set new grid height along the dragging period
         this.$el.css('height', this.$el.height() +
           (this.player_grid_data.size_y * this.min_widget_height));
@@ -361,14 +365,17 @@
         var colliders = this.faux_grid;
         var coords = this.$player.data('coords').coords;
 
-        this.cells_occupied_by_player = this.get_cells_occupied(this.player_grid_data);
+        this.cells_occupied_by_player = this.get_cells_occupied(
-        this.cells_occupied_by_placeholder = this.get_cells_occupied(this.placeholder_grid_data);
+            this.player_grid_data);
+        this.cells_occupied_by_placeholder = this.get_cells_occupied(
+            this.placeholder_grid_data);
 
         this.last_cols = [];
         this.last_rows = [];
 
         // see jquery.collision.js
-        this.drag_api = this.$player.collision(colliders, this.options.collision);
+        this.drag_api = this.$helper.collision(
+            colliders, this.options.collision);
 
         this.$preview_holder = $('<li />', {
               'class': 'preview-holder',
@@ -433,7 +440,7 @@
             this.on_stop_overlapping_row
         );
 
-        this.$player.attr({
+        this.$player.add(this.$helper).attr({
             'data-col': this.placeholder_grid_data.col,
             'data-row': this.placeholder_grid_data.row
         }).css({
@@ -629,7 +636,8 @@
 
 
     /**
-    * Sorts an Array of grid coords objects (representing the grid coords of each widget) in ascending way.
+    * Sorts an Array of grid coords objects (representing the grid coords of
+    * each widget) in ascending way.
     *
     * @method sort_by_row_asc
     * @param {Array} widgets Array of grid coords objects
@@ -648,7 +656,8 @@
 
 
     /**
-    * Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.
+    * Sorts an Array of grid coords objects (representing the grid coords of
+    * each widget) in descending way.
     *
     * @method sort_by_row_desc
     * @param {Array} widgets Array of grid coords objects
@@ -666,7 +675,8 @@
 
 
     /**
-    * Sorts an Array of grid coords objects (representing the grid coords of each widget) in descending way.
+    * Sorts an Array of grid coords objects (representing the grid coords of
+    * each widget) in descending way.
     *
     * @method manage_movements
     * @param {HTMLElements} $widgets A jQuery collection of HTMLElements
@@ -723,7 +733,7 @@
     fn.is_player = function(col_or_el, row) {
         if (row && !this.gridmap[col_or_el]) { return false; }
         var $w = row ? this.gridmap[col_or_el][row] : col_or_el;
-        return $w && $w.is(this.$player);
+        return $w && ($w.is(this.$player) || $w.is(this.$helper));
     };
 
 
@@ -905,7 +915,8 @@
 
         if (moved_down || changed_column) {
             $nexts.each($.proxy(function(i, widget){
-                this.move_widget_up( $(widget) , this.placeholder_grid_data.col - col + phgd.size_y );
+                this.move_widget_up(
+                    $(widget), this.placeholder_grid_data.col - col + phgd.size_y);
             }, this));
         }
 
@@ -937,7 +948,8 @@
 
             while (--r > 0){
                 if (this.is_empty(tcol, r) || this.is_player(tcol, r) ||
-                    this.is_widget(tcol, r) && grid_col[r].is($widgets_under_player)
+                    this.is_widget(tcol, r) &&
+                    grid_col[r].is($widgets_under_player)
                 ) {
                     upper_rows[tcol].push(r);
                     min_row = r < min_row ? r : min_row;