0

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

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

在包括 IE9 在内的现代浏览器中拖动包含 DIV 时，它像黄油一样光滑。在 IE7 和 IE8 中，情况并非如此！

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

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

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

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

4

2 回答 2

1

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

所以做类似的事情

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

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

于 2012-04-19T09:50:29.850 回答
1

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

在我的拖动功能（movemove 事件）中，我未能包含 stopPropagation 或 preventDefault() 调用。添加了这些，性能显着提高！

于 2012-04-19T11:08:08.547 回答