2

HighStocks の株価チャートを gridster と一緒に使用しています。gridster の個々のブロックは、自由にドラッグできます。ただし、株価のタイム スライダー ガジェットもドラッグおよびサイズ変更可能です。グリッドスター ウィジェットの上にあるので、スライダーをドラッグすると、ウィジェット全体も動きます。私の要点を示すために JSFiddle を含めました。 http://jsfiddle.net/faPrd/

要素がそれほど多くないため、この Fiddle ではそれほど顕著ではありませんが、スライダーをドラッグすると、ガジェット全体が多少移動することが既にわかります。どうすればこれを防ぐことができますか?

私の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');
});
4

1 に答える 1

1

一般的な jQuery ソリューションの 1 つmousedownは、チャート コンテナーで検出して gridster-dragging を無効にmouseupし、一般的に検出して gridster-dragging を有効にすることです。

たとえば、次のコードを使用します ( JSFiddle の例)。

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

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

これには、チャートコンテナの一部ではなく、グリッド内にある領域が必要です (そうしないと、グリッドスターグリッドを取得する場所がありません)。または、クリックしたときにグリッドスターのドラッグを無効にする要素をより具体的にすることができます。

.highcharts-navigatorセレクターとしてうまく機能しない方法を見て (そして、その領域のセレクターの量もそうではありません)、これがナビゲーターのグリッドスターのみを無効にする簡単な方法の 1 つかもしれないことがわかりました ( 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();
});
于 2014-07-25T19:10:44.470 に答える