优化jQuery UI拖放时间表网格 [英] Optimizing jQuery UI drag and drop schedule grid

问题描述

我有一个基于HTML表的调度网格，使用jQuery / jQuery UI拖放。表中的每个单元格表示用户和时隙。我在IE9，FireFox和Chrome中表现非常出色，但IE8无法使用，因为用户启动拖动时间和拖曳助手出现的时间之间有几秒钟的暂停。

I have a schedule grid based on a HTML table using jQuery/jQuery UI drag and drop. Each cell in the table represents a user and timeslot. I've got good performance in IE9, FireFox, and Chrome however IE8 is unusable because there is a several second pause between the time a user starts a drag and the time the drag helper appears.

我知道部分问题是我正在创建大量的droppables，在这种情况下：

I know part of the problem is that I am creating a large number of droppables, in this case:

112 24小时网格的用户创建2688个droppables）

112 Users on a 24 hour grid (total of 2688 droppables created)

如果我删除了使空白2688单元格丢弃的代码，速度显着增加，但是IE8中的动画仍然感觉缓慢。

If I remove the code that makes the empty 2688 cells dropable the speed increases significantly, but animation still feels sluggish in IE8.

有什么建议可以加快速度？我已经考虑过将表格本身设置为droppable，但我不知道如何计算哪个单元格被丢弃，我将丢失指示活动单元格的hoverState CSS背景。

What are some suggestions for speeding this up? I've considered making the table itself the droppable, but I'm not sure how I would calculate which cell was being dropped onto, and I would lose the hoverState CSS background that indicates the active cell.

一个关键要求是我坚持HTML表，因为它是如何在服务器上绑定数据。

One key requirement is that I stick with the HTML table because of how it is data bound on the server.

我正在打败一场失败的战斗针对IE8？我真的希望在浏览器中尽快做到这一点。

Am I fighting a losing battle against IE8? I'd really like to make this as fast as possible in that browser.

推荐答案

我会尝试绑定到鼠标悬停事件，并且实际上并没有初始化任何可执行文件（或元素上的交互所需的其他参数），直到鼠标实际上在元素上方。通过采取这条路线，我在高度互动的页面上提高了约400％的性能。

I'd try to bind to the mouseover event, and don't actually initialize any of the droppable (or other arguments you need for interaction on the elements) until the mouse is actually over the element. I increased performance by about 400% on a highly interactive page by taking this route.

如果没有帮助，请考虑使用dynaTrace ajax版本进行测试，慢点在javascript中。

If that doesn't help, consider testing with dynaTrace ajax edition that shows you where the slow points are in the javascript.

这篇关于优化jQuery UI拖放时间表网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！