HighStocks可拖动元素干扰网格拖动 [英] HighStocks draggable element interfering with gridster dragging
问题描述
我正在使用HighStocks的股票图表和gridster。 gridster中的每个块都可以自由拖放。但是，股票时间滑块小工具也可以拖动和调整大小。由于它位于栅格小部件的顶部，因此每当我拖动滑块时，整个小部件也会移动。我包括一个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 =gridliststyle =height：550px; width：550px; position：relative>
< li id =gridlist1class =gs -wdata-row =1data-col =1data-sizex =3data-sizey =3>
< div id =containerstyle =height：400px; min-width：310px>< / div>
< / li>
< li id =gridlist2class =gs -wdata-row =1data-col =4data-sizex =3data-sizey =3>
< / li>
< / ul>
< / div>
我的Javascript for gridster：
var gridster; gridster UL。
$（函数（）{
gridster = $（）gridster（{
widget_base_dimensions：[150，150]，
widget_margins：[5,5 ]，
serialize_params：功能（$瓦特，WGD）{
返回{
X：wgd.col，$ b $由：wgd.row，
宽度： wgd.size_x，
高度：wgd.size_y，
ID：$（$ w）的.attr（ 'ID'）
};
}，
可拖动： {
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 + = ，;
}
}
仓位+ =];
localStorage.setItem（'仓位'，仓位）;
}
}，
helper：'clone'，
resize：{
enabled：true，
stop：function（e，ui，$ widget）{
v ar positions =[;
for（var i = 0; i< this.serialize（）。length; i ++）{
positions + = JSON.stringify（this.serialize（）[i]）;
if（i！== this.serialize（）。length - 1）{
positions + =，;
}
}
职位+ =];
localStorage.setItem（'positions'，positions）;
}
}
}）。data（'gridster'）;
}）;
mousedown 来禁用gridster拖动，并通常检测 mouseup 以启用gridster拖动。 例如使用以下代码（ JSFiddle示例）：
$（'＃container'）。mousedown（function（）{
gridster.disable（）;
}）;
$ b $（document）.mouseup（function（）{
gridster.enable（）;
}）;
这将要求您有一些不属于图表容器的区域，但它位于网格（否则你将无处获取栅格网格）。或者你可以更加具体地说明什么元素会被点击时禁用栅格拖动。
了解 .highcharts-navigator 不能很好地作为选择器（并且在该区域中没有任何数量的选择器），我发现这可能是仅禁用导航器的栅格的更简单的方法之一（ JSFiddle示例）：
$（'＃container'）。mousedown（function（event）{
var chart = $（'＃container'）。highcharts（）;
var navTop = $（'。highcharts-navigator' ）.offset（）顶部;
变种navHeight = chart.options.navigator.height + chart.options.scrollbar.height;
如果（event.pageY> navTop&安培;&安培;
event.pageY< navTop + navHeight）{
gridster.disable（）;
}
}）;
$ b $（document）.mouseup（function（）{
gridster.enable（）;
}）;
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');
});
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();
});
这篇关于HighStocks可拖动元素干扰网格拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
