Проблемы производительности пользовательского интерфейса jQuery с таблицей в IE - PullRequest
Новая
       30

Проблемы производительности пользовательского интерфейса jQuery с таблицей в IE

6 голосов
/ 24 февраля 2009

У меня проблемы с получением кода пользовательского интерфейса для хорошей работы в IE.

У меня есть таблица - матрица значений. Каждая ячейка может быть пустой или содержать список элементов.

Я хочу, чтобы пользователи могли перетаскивать элементы между ячейками.

Итак, мой HTML выглядит примерно так: 

<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>

Затем я использую jQuery 1.3.1 и 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
        });
    });
});

Обратите внимание, что это упрощенный, усеченный и незаконченный код.

Моя проблема в том, что в FX, Safari, Chrome и т. Д. (То есть во всех приличных браузерах) это работает нормально.

IE действительно борется, хотя. С таблицей 5х5 заметна задержка IE в начале перетаскивания. На столе размером 10x10, возможно, с 100 элементами, начало перетаскивания висит в браузере.

Я хочу иметь возможность поддерживать до 20х15 ячеек и, возможно, до 500 предметов - это просто невозможно? Не похоже, что так должно быть.

Я что-то не так делаю? Есть ли способ сделать это, чтобы не замедлять страницу в IE, как это?

Ответы [ 4 ]

3 голосов
/ 27 февраля 2009

Может помочь сужение части DOM, которую должен искать jQuery. Добавьте идентификатор к содержащемуся элементу DOM 

<table id="myTable">

Затем измените селектор jQuery, чтобы найти элементы в этом контейнере 

$j('#myTable .draggable-item').each(function() { ...
2 голосов
/ 24 февраля 2009

Это может быть рендеринг таблицы ... Можете ли вы попробовать без таблицы?

Если ваши ячейки имеют одинаковый размер, вы можете получить табличное отображение с плавающей точкой: 

<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>

Если использование таблицы является обязательным, можно установить стиль table-layout на «fixed» и указать размер ячеек.

2 голосов
/ 24 февраля 2009

Именно из-за этой проблемы в iGoogle и других похожих приложениях используется прозрачная рамка с пунктирной линией по краю. IE не может перетаскивать полные объекты из-за проблемы, описанной выше.

1 голос
/ 15 февраля 2011

моя работа заключается в том, чтобы удалить «activeClass» из определения «dropable» и использовать только «hoverClass».

На таблице около 150 строк с примерно 10 столбцами. Время задержки увеличилось с 10 секунд до менее 1. Перетаскивание становится немного рывком, но не бесполезным.

...