Jquery: optimizing Droppable on MouseOver

问题:

I'm using the Draggable/Droppable functionality of Jquery to allow drag-and-drop from a TreeView to a simple HTML table, but am finding that Droppable performance gets very sluggish as the number of cells increase in the table.

I've looked around and the most-common solution people suggest is limiting the number of active draggables and droppables. Now, limiting the draggables was simple enough (use the mouseover of the treeview node to enable dragging).

Then I tried to do the same thing for a droppable (ie, only make a cell Droppable when the user mouseovers it), but have hit a timing problem.

Basically what happens is, the user drags a node over the cell and can't drop it. But when I then try to do it a second time, it works! In other words, the mouseover event needs to complete before it works, but 'completing it' means stopping your first drag-and-drop which is obviously far from ideal.

This is the code that I'm using:

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

and obviously addCell() is called for each new cell that is added to the table dynamically (on page load, or on table resize).

Is there a way around this? This would be much easier if Javascript has something like a 'beginmouseover' event...

回答1:

In the end, I managed to avoid it by simply making the TABLE droppable (instead of the individual cells) and then figuring out the dropposition in the drop handler.

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

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