Gridster 끌기를 방해하는 HighStock draggable 요소

Question

HighStocks의 주식 차트를 Gridster와 함께 사용하고 있습니다. Gridster의 각 블록은 자유롭게 드래그 할 수 있습니다. 그러나 주식 시간 슬라이더 가젯도 draggable 및 크기를 조정할 수 있습니다. Gridster 위젯 위에 있기 때문에 슬라이더를 끌 때마다 전체 위젯도 움직입니다. 내 요점을 설명하기 위해 JSFiddle을 포함 시켰습니다. http://jsfiddle.net/faPrd/

많은 요소가 없기 때문에이 피들에서는 발음하지 않지만 슬라이더를 드래그하면 전체 가제트가 다소 바뀌는 것을 이미 볼 수 있습니다. 이 문제를 어떻게 방지 할 수 있습니까?

내 HTML : gridster에 대한

<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> 

내 자바 스크립트 :

일반 jQuery를 솔루션 gridster - 드래그를 사용하지 않도록 차트 컨테이너에 mousedown을 검출하고, 일반적으로 mouseup을 검출 할 수

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

하나 그리드 스터 드래깅을 가능하게합니다.

다음 코드 ( JSFiddle example)를 사용하여 예를 들어

:

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

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

이 차트 컨테이너의 일부가 아닌 일부 영역을 할 필요가 있지만, 그리드에 (그렇지 않으면 곳이 없을 것 그리드 스터 그리드 잡기). 또는 클릭하면 gridster-dragging을 비활성화해야하는 요소에 대해보다 구체적으로 설명 할 수 있습니다.

선택기로 잘 작동하지 않는데 (어느 지역에서도 선택기를 사용하지 않습니다.)이 방법은 탐색기의 gridster를 비활성화하는 쉬운 방법 중 하나임을 발견했습니다 (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(); 
});