Jquery:优化 MouseOver 上的 Droppable

Question

我正在使用 Jquery 的 Draggable/Droppable 功能来允许从 TreeView 拖放到简单的 HTML 表格，但我发现随着表格中单元格数量的增加，Droppable 性能变得非常缓慢。

我环顾四周，人们建议的最常见的解决方案是限制事件的可拖动对象和可放置对象的数量。现在，限制可拖动对象已经足够简单了(使用 TreeView 节点上的鼠标悬停来启用拖动)。

然后我尝试对可放置的单元格执行相同的操作(即，仅当用户将鼠标悬停在单元格上时才使单元格可放置)，但遇到了计时问题。

基本上发生的情况是，用户将节点拖动到单元格上并且无法删除它。但当我尝试第二次时，它起作用了!换句话说，鼠标悬停事件需要在其工作之前完成，但“完成”意味着停止您的第一次拖放，这显然远非理想。

这是我正在使用的代码:

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

显然，addCell() 会为动态添加到表格中的每个新单元格调用(在页面加载时或在表格调整大小时)。

有办法解决这个问题吗？如果 Javascript 有类似“beginmouseover”事件的东西，这会容易得多...

Answer 1

最后，我通过简单地使 TABLE 可放置(而不是单个单元格)，然后计算放置处理程序中的放置位置，成功地避免了这种情况。

$("#taskTable").droppable({ drop: onDrop, addClasses: false, tolerance: 'pointer' });

function onDrop(event, ui) {
var theCell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());
}