jQuery UI performance issues with a table in IE

Question

I'm having problems getting UI code to perform at all well in IE.

I have a table - a matrix of values. Each cell can be empty or hold a list of items.

I want users to be able to drag items between cells.

So my HTML looks something like this:

<table>
    <tr><td></td><th scope="col">col 1</th><th scope="col">col 2</th></tr>
    <tr><th scope="row">row 1</th>
        <td class="droppable-cell">
            <div class="draggable-item">item A</div>
            <div class="draggable-item">item B</div>
        </td>
        <td class="droppable-cell"></td>
    </tr>
    <tr><th scope="row">row 2</th>
        <td class="droppable-cell"></td>
        <td class="droppable-cell">
            <div class="draggable-item">item C</div>
            <div class="draggable-item">item D</div>
        </td>
    </tr>
</table>

Then I'm using jQuery 1.3.1 and jQuery UI 1.6rc6:

$j('.draggable-item').each(function()
{
    $j(this).draggable({
       addClasses: false,
       revert: true, 
       zIndex: 2000,
       cursor: 'move'
    });
});

$j('.droppable-cell').each(function()
{
    $j(this).droppable({
        addClasses: false,
        activeClass: 'droppable-cell-candrop',
        hoverClass: 'droppable-cell-hover',
        tolerance: 'pointer',

        drop: function(event, ui)
        {
            //function to save change
        });
    });
});

Note that this is simplified, truncated and unfinished code.

My problem is that in FX, Safari, Chrome, etc (i.e. all the decent browsers) this works fine.

IE really struggles though. With a 5x5 table IE's delay on the start of a drag is noticeable. On a 10x10 table with maybe 100 items the start of the drag hangs the browser.

I want to be able to support up to round 20x15 cells and maybe up to 500 items - is this just impossible? It doesn't seem like it should be.

Am I doing something wrong? Is there a way to do this that doesn't slow the page in IE like this?

Answer 1

Narrowing the portion of the DOM that jQuery has to search may help. Add an id to the containing DOM element

<table id="myTable">

Then alter your jQuery selector to find elements within this container

$j('#myTable .draggable-item').each(function() { ...

Answer 2

This exact issue is why iGoogle and other simliar apps use a transparent box with a dotted line around the edge. IE is unable to drag full objects, because of the issue you have outlined above.

Answer 3

It could be the table rendering... Can you try without the table?

If your cells are the same size you can achieve the table-like display floating them:

<style>
.droppable-cell{
  float:left; width: 50%; height: 20px; border: 1px solid black;
}
</style>

<div class="droppable-cell">
        <div class="draggable-item">item A</div>
        <div class="draggable-item">item B</div>
</div>
<div class="droppable-cell"></div>
<div class="droppable-cell"></div>
<div class="droppable-cell">
        <div class="draggable-item">item C</div>
        <div class="draggable-item">item D</div>
</div>

If using a table is a must setting the table-layout style to 'fixed' and specifying the cells size may help.

Answer 4

my work around is dropping the 'activeClass' from the droppable definition, and only using 'hoverClass'.

On a table of about 150 rows with about 10 columns. It went from 10 secs of lag to less than 1. The dragging becomes a little jerky, but not unusable.