我将 HighStocks 的股票图表与 gridster 一起使用。 Gridster 中的每个单独的 block 都可以自由拖动。但是,股票时间 slider 小工具也是可拖动和可调整大小的。因为它位于 gridster 小部件之上,所以每当我拖动 slider 时,整个小部件也会移动。我包含了一个 JSFiddle 来证明我的观点。 http://jsfiddle.net/faPrd/
它在这个 Fiddle 中没有那么明显,因为没有那么多元素,但是您已经可以看到,当您拖动 slider 时,整个小工具会发生一些变化。我怎样才能避免这种情况?
我的 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>
我的 Gridster 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');
});
最佳答案
一个通用的 jQuery 解决方案可能是检测图表容器上的 mousedown
以禁用 gridster-dragging,并通常检测 mouseup
以启用 gridster-dragging。
例如使用以下代码 ( JSFiddle example ):
$('#container').mousedown(function() {
gridster.disable();
});
$(document).mouseup(function(){
gridster.enable();
});
这将要求您有一些区域不属于图表容器的一部分,但在网格中(否则您将无处获取 gridster-grid)。或者,您可以更具体地说明在单击时应禁用网格拖动的元素。
看到 .highcharts-navigator
不能很好地用作选择器(该区域的任何数量的选择器也不能),我发现这可能是更简单的方法之一只为导航器禁用 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();
});
关于javascript - HighStocks 可拖动元素干扰 gridster 拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24960994/