Перетаскиваемый элемент HighStocks, препятствующий перетаскиванию гридстера

Question

Я использую график акций от HighStocks вместе с гридстером. Каждый отдельный блок в гридстере свободно перетаскивается. Тем не менее, гаджет ползунка времени акции также можно перетаскивать и изменять его размер. Так как он расположен поверх виджета гридстера, всякий раз, когда я перетаскиваю ползунок, весь виджет также перемещается. Я включил JSFiddle, чтобы продемонстрировать свою точку зрения. http://jsfiddle.net/faPrd/

Это не так ярко выражено в этой скрипке, потому что там не так много элементов, но вы уже можете видеть, что когда вы перемещаете ползунок, весь гаджет несколько смещается. Как я могу предотвратить это?

Мой 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>

Мой Javascript для гридстера:

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

Одним из общих решений JQuery может быть обнаружение mousedown на графике-контейнере, чтобы отключить перетаскивание гридов и обнаружение mouseup в общем, чтобы включить гридстер-перетаскивание.

Например, используя следующий код ( пример JSFiddle):

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

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

Это потребует от вас наличия некоторой области, которая не является частью контейнера графика, но находится в сетке (в противном случае вам некуда было бы захватить сетку гридстера). Или вы могли бы более конкретно указать, какие элементы должны отключать перетаскивание по гридстеру при нажатии.

Видя как .highcharts-navigator не очень хорошо работает как селектор (и не имеет никакого количества селекторов в этом регионе), я обнаружил, что это может быть одним из самых простых способов отключить гридстер только для навигатора ( пример JSFiddle):

$('#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();
});