6

我在让 UI 代码在 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 真的很挣扎。对于 5x5 表格，IE 在拖动开始时的延迟很明显。在可能有 100 个项目的 10x10 表上，拖动的开始会挂起浏览器。

我希望能够支持多达 20x15 个单元格，也许多达 500 个项目 - 这是不可能的吗？似乎不应该如此。

难道我做错了什么？有没有办法做到这一点，不会像这样减慢 IE 中的页面？

4

4 回答 4

3

缩小 jQuery 必须搜索的 DOM 部分可能会有所帮助。向包含的 DOM 元素添加一个 id

<table id="myTable">

然后更改您的 jQuery 选择器以在此容器中查找元素

$j('#myTable .draggable-item').each(function() { ...
于 2009-02-27T19:14:16.603 回答
2

这正是 iGoogle 和其他类似应用程序使用边缘有虚线的透明框的原因。由于您上面概述的问题，IE 无法拖动完整的对象。

于 2009-02-24T12:04:20.390 回答
2

可能是表格渲染...您可以尝试不使用表格吗？

如果您的单元格大小相同，则可以实现浮动它们的类似表格的显示：

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

如果必须使用表格，请将表格布局样式设置为“固定”并指定单元格大小可能会有所帮助。

于 2009-02-24T15:02:44.050 回答
1

我的工作是从可放置定义中删除“activeClass”，并且只使用“hoverClass”。

在大约 150 行和大约 10 列的表上。它从 10 秒的延迟变为不到 1 秒。拖动变得有点生涩，但并非无法使用。

于 2011-02-15T16:57:55.000 回答