Question

我目前正在为客户构建一个相当雄心勃勃的交互式墙，必须与IE7向上兼容。

它基本上是一个使用Raphael.js绘制的大型可拖动六边形网格。网格的大小取决于屏幕大小，但在大多数情况下不会超过~2500 SVG元素。

在现代浏览器（包括IE9）中拖动包含DIV时，它就像黄油一样顺畅。在IE7和IE8中，情况并非如此！

必须支持旧浏览器意味着没有CSS3支持，因此没有CSS转换支持。因此，我必须更新CSS left和top属性来定位元素。

是否有更有效的方法在这些旧浏览器中移动大型元素？我注意到缓慢拖动是非常平滑的，而拖动很快就会杀死东西。我已经尝试限制每秒处理拖拽事件的次数，但这没有多大影响。

我的主要选项是禁用IE7 / 8中的拖动或减小主元素的大小。这些都不是理想的，但到目前为止这些是我唯一的选择。

我认为这是一个很长的镜头，但任何建议都会很棒！

Answer 1

如何限制执行？这实际上意味着div仅在您停止移动鼠标时定位，并且不随着moouse光标移动...

这样做

var timeout;
$("#element").mouseover(function() {
  if ([ie_lte_9]) {
    clearTimeout(timeout);
    timeout = setTimeout(doDrag, 10);
  } else {
    doDrag();
  }
});

源鼠标悬停的

可能是您的代码中的另一种事件类型，并且doDrag被称为不同的方式...“[ie_lte_9]”只是意味着您需要检测Internet Explorer＆lt; 9

Answer 2

在这里回答我自己的问题，我想如果其他人有类似的问题，他们可能会偶然发现这个问题并且会有所帮助......

在我的拖动功能（movemove事件）中，我未能包含stopPropagation或preventDefault（）调用。添加了这些并且性能得到了显着改善！

旧版浏览器中的高效元素定位

2 个答案: