HighStocks draggable element interfering with gridster dragging

Question

I am using a stocks chart from HighStocks together with gridster. Each individual block in gridster is freely draggable. However, the stocks time slider gadget is also draggable and resizable. Since it sits on top of a gridster widget, whenever I drag the slider around, the entire widget also moves. I included a JSFiddle to demonstrate my point. http://jsfiddle.net/faPrd/

It's not as pronounced in this Fiddle because there are not that many elements, but you can already see that when you drag the slider around, the entire gadget shifts somewhat. How can I prevent this?

My HTML:

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div class="gridster ready">
    <ul id = "gridlist" style="height: 550px; width: 550px; position: relative">
        <li id = "gridlist1" class="gs-w" data-row="1" data-col="1" data-sizex="3" data-sizey="3">
            <div id="container" style="height: 400px; min-width: 310px"></div>
        </li>
        <li id = "gridlist2" class="gs-w" data-row="1" data-col="4" data-sizex="3" data-sizey="3">
        </li>
    </ul>
</div>

My Javascript for gridster:

var gridster;
$(function(){
  gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [150, 150],
    widget_margins: [5, 5],

    serialize_params: function($w, wgd) {
      return {
        x: wgd.col,
        y: wgd.row,
        width: wgd.size_x,
        height: wgd.size_y,
        id: $($w).attr('id')
      };
    },
    draggable: {
      stop: function(event, ui) {
        var positions = "[";
        for (var i = 0; i < this.serialize().length; i++) {
          positions += JSON.stringify(this.serialize()[i]);
          if (i !== this.serialize().length - 1) { 
            positions += ",";
          }
        }
        positions += "]";
        localStorage.setItem('positions', positions);
      }
    },
    helper: 'clone',
    resize: {
      enabled: true,
      stop: function(e, ui, $widget) {
        var positions = "[";
        for (var i = 0; i < this.serialize().length; i++) {
          positions += JSON.stringify(this.serialize()[i]);
          if (i !== this.serialize().length - 1) { 
            positions += ",";
          }
        }
        positions += "]";
        localStorage.setItem('positions', positions);
      }
    }
  }).data('gridster');
});

Answer 1

One general jQuery solution might be detecting mousedown on the chart-container to disable gridster-dragging, and detecting mouseup in general to enable gridster-dragging.

For example using the following code (JSFiddle example):

$('#container').mousedown(function() {
    gridster.disable();
});

$(document).mouseup(function(){
    gridster.enable();
}); 

This would require you to have some area that is not part of the chart-container, but is in the grid (otherwise you would have nowhere to grab the gridster-grid). Or you could be more specific with what elements that should disable the gridster-dragging, when clicked.

Seing how .highcharts-navigator doesn't work very well as a selector (and neither does any amount of selectors in that region), I found that this might be one of the easier ways to only disable gridster for the navigator (JSFiddle example):

$('#container').mousedown(function(event) {
    var chart = $('#container').highcharts();
    var navTop = $('.highcharts-navigator').offset().top;
    var navHeight = chart.options.navigator.height + chart.options.scrollbar.height;

    if(event.pageY > navTop &&
            event.pageY < navTop + navHeight) {
        gridster.disable();
    }
});

$(document).mouseup(function(){
    gridster.enable();
});