Jquery:优化鼠标悬停时的可拖放性

Jquery:优化鼠标悬停时的可拖放性,jquery,mouseover,droppable,Jquery,Mouseover,Droppable,我正在使用Jquery的可拖放功能来允许从树视图拖放到一个简单的HTML表,但是我发现随着表中单元格数量的增加,可拖放性能变得非常缓慢 我环顾四周,人们建议的最常见的解决方案是限制活动可拖放和可拖放的数量。现在,限制draggables就足够简单了(使用treeview节点的鼠标悬停来启用拖动) 然后,我尝试对一个可拖放单元做同样的事情(即,只有当用户鼠标移到一个单元上时,才使其可拖放),但遇到了一个计时问题 基本上,用户在单元上拖动一个节点,不能将其丢弃。但是当我第二次尝试时,它就成功了!换句

我正在使用Jquery的可拖放功能来允许从树视图拖放到一个简单的HTML表,但是我发现随着表中单元格数量的增加,可拖放性能变得非常缓慢

我环顾四周,人们建议的最常见的解决方案是限制活动可拖放和可拖放的数量。现在,限制draggables就足够简单了(使用treeview节点的鼠标悬停来启用拖动)

然后,我尝试对一个可拖放单元做同样的事情(即,只有当用户鼠标移到一个单元上时,才使其可拖放),但遇到了一个计时问题

基本上,用户在单元上拖动一个节点,不能将其丢弃。但是当我第二次尝试时,它就成功了!换句话说,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>

6:00
函数addCell()
{
var newCell=$(“”);
mouseover(function(){$(this).dropable({drop:onDrop,hoverClass:“ui状态活动”,addClasses:false});});
//将单元格添加到表中,此处的代码并不真正相关
}
显然,对于动态添加到表中的每个新单元格(在页面加载或调整表大小时),都会调用addCell()


有办法解决这个问题吗?如果Javascript有类似于“beginmouseover”事件的东西,那么这会容易得多。

最后,我通过简单地使表可拖放(而不是单个单元格),然后在拖放处理程序中计算出拖放位置来避免它

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

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

也许是mouseenter,因为您已经在使用jQuery了?