我正在使用
Jquery的Draggable / Droppable功能来允许从TreeView拖放到一个简单的HTML表,但我发现随着表中单元格数量的增加,Droppable性能变得非常缓慢.
我环顾四周,人们建议的最常见解决方案是限制活动可拖动和可放置的数量.现在,限制draggables很简单(使用treeview节点的鼠标悬停来启用拖动).
然后我尝试为droppable做同样的事情(即,当用户将鼠标悬停时只制作一个单元格Droppable),但是遇到了计时问题.
基本上发生的是,用户在单元格上拖动节点并且不能丢弃它.但是当我第二次尝试这样做时,它就可以了！换句话说,mouSEOver事件需要在它工作之前完成,但“完成它”意味着停止你的第一次拖放,这显然远非理想.
这是我正在使用的代码：
<table id="taskTable">
<tbody>
<tr>
<td class="taskTableHourCell">6:00</td>
<td class='aCell'></td> <!-- this is the cell to be dragged on,is actually created dynamically,see below -->
</tr>
</tbody>
</table>
<script type="text/javascript">
function addCell()
{
var newCell = $("<td class='aCell'></td>");
newCell.mouSEOver(function(){$(this).droppable({ drop: onDrop,hoverClass: "ui-state-active",addClasses: false });});
// Add the cell to the table,code not really relevant here
}
</script>
解决方法
最后,我设法通过简单地使TABLE droppable(而不是单个单元格)然后计算drop处理程序中的dropposition来避免它.
$("#taskTable").droppable({ drop: onDrop,addClasses: false,tolerance: 'pointer' });
function onDrop(event,ui) {
var theCell = document.elementFromPoint(event.pageX - $(window).scrollLeft(),event.pageY - $(window).scrollTop());
}
