Question

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

我环顾四周，人们建议的最常见解决方案是限制活动可拖动和可放置的数量。现在，限制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>

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

有解决方法吗？如果Javascript有类似'beginmouseover'事件......

，这会容易得多

Answer 1

最后，我设法通过简单地使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());
}

Jquery：在MouseOver上优化Droppable

1 个答案: