add handle_class option

README.md

@@ -132,6 +132,7 @@ $(function () {
 - `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'`)

dist/gridstack.js

@@ -383,6 +383,8 @@
     var GridStack = function(el, opts) {
         var self = this, one_column_mode;
 
+        opts = opts || {};
+
         this.container = $(el);
 
         opts.item_class = opts.item_class || 'grid-stack-item';
@@ -394,6 +396,7 @@
             item_class: 'grid-stack-item',
             placeholder_class: 'grid-stack-placeholder',
             handle: '.grid-stack-item-content',
+            handle_class: null,
             cell_height: 60,
             vertical_margin: 20,
             auto: true,
@@ -408,7 +411,7 @@
                 handles: 'se'
             }),
             draggable: _.defaults(opts.draggable || {}, {
-                handle: '.grid-stack-item-content',
+                handle: opts.handle_class || (opts.handle ? '.' + opts.handle : '') || '.grid-stack-item-content',
                 scroll: false,
                 appendTo: 'body'
             })

src/gridstack.js

@@ -383,6 +383,8 @@
     var GridStack = function(el, opts) {
         var self = this, one_column_mode;
 
+        opts = opts || {};
+
         this.container = $(el);
 
         opts.item_class = opts.item_class || 'grid-stack-item';
@@ -394,6 +396,7 @@
             item_class: 'grid-stack-item',
             placeholder_class: 'grid-stack-placeholder',
             handle: '.grid-stack-item-content',
+            handle_class: null,
             cell_height: 60,
             vertical_margin: 20,
             auto: true,
@@ -408,7 +411,7 @@
                 handles: 'se'
             }),
             draggable: _.defaults(opts.draggable || {}, {
-                handle: '.grid-stack-item-content',
+                handle: opts.handle_class || (opts.handle ? '.' + opts.handle : '') || '.grid-stack-item-content',
                 scroll: false,
                 appendTo: 'body'
             })