JQuery: оптимизация Droppable на MouseOver

Question

Я использую функциональность JQuery для Draggable/Droppable, чтобы разрешить перетаскивание из TreeView в простую таблицу HTML, но я обнаружил, что производительность Droppable становится очень медлительной, поскольку количество ячеек увеличение таблицы.

Я огляделся, и наиболее распространенное решение, которое люди предлагают, ограничивает количество активных перетаскиваемых и droppables. Теперь ограничение перетаскивания было достаточно простым (используйте наложение мыши на узел дерева, чтобы включить перетаскивание).

Тогда я попытался сделать то же самое для 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 (вместо отдельных ячеек), а затем выяснив, в обработчике капель.

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

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