JQuery: Droppable optimization on MouseOver

Question

I use the Jugery function for Draggable / Droppable to allow dragging from TreeView to a simple HTML table, but I found that Droppable's performance becomes very sloppy as the number of cells increases in the table.

I have looked around and the most common solution that people offer is limiting the number of active draggable and droppables. Now the drag and drop restriction was simple enough (use the mouse over the tree node to enable drag and drop).

Then I tried to do the same for droppable (i.e. make only the Droppable cell when the user hangs it), but hit the synchronization problem.

Basically what happens is the user drags the node across the cell and cannot drop it. But when I try to do it a second time, it will work! In other words, the mouseover event must end before it works, but “complete it” means stopping your first drag, which is clearly far from ideal.

This is the code 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 every new cell that is dynamically added to the table (when the page loads or the table is resized).

Is there any way around this? That would be a lot easier if Javascript has something like a beginmouseover event ...

Answer 1

, , TABLE ( ), , 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());
}