我使用
JQuery来使表中的元素拖动. (我之前从未使用过JQuery).它工作正常,但是很慢.例如,从我点击并按住一个项目的那一刻起,光标变化的时间大约是2秒.这是在Firefox 3.0.6.一旦项目被拖动,当我放开鼠标按钮和显示出来的时候,有一个更短的但仍然明显的延迟(约半秒钟,我估计).
我怀疑它是如此之慢的原因是因为表格相当大(6列和大约100行),但在我看来,它看起来不是很大,我想知道是否有一些愚蠢的事情是使它这么慢例如,我不知道每次拖动某些东西时,JQuery代码是否被无意义地应用于表中的每个元素.我不知道为什么会发生这种情况.
如果它有帮助,这里是我的代码(注意,我已经取出了游标调用,因为我担心它可能会减慢事情).
<script type='text/javascript'>
$(document).ready
(
function()
{
$('.draggable_div').draggable
(
{
start: function(event,ui)
{
$(this).css('background-color','#ddddff');
}
}
);
$('.draggable_td').droppable
(
{
over: function(event,'#ccffcc');
},out: function(event,null);
},drop: function(event,ui)
{
// snip: removed code here to save space.
}
}
);
}
);
</script>
<table id='main_table' border=0>
<tr>
<th width=14.2857142857%>0</th>
<th width=14.2857142857%>1</th>
<th width=14.2857142857%>2</th>
<th width=14.2857142857%>3</th>
<th width=14.2857142857%>4</th>
<th width=14.2857142857%>5</th>
<th width=14.2857142857%>6</th>
</tr>
<tr>
<td class=draggable_td id='td:0:0:'>
<div class=draggable_div id='div:0:0:1962'>
content
</div>
</td>
<td class=draggable_td id='td:0:1:1962'>
<div class=draggable_div id='div:0:1:14482'>
content
</div>
</td>
<!-- snip: all the other cells removed for brevity -->
</tr>
<!-- snip: all the other rows removed for brevity -->
</table>
(注意：它似乎在IE 7中似乎没有工作,所以也许我只是在这里做一些非常错误的事情)
