Jquery: оптимизация Droppable на MouseOver - PullRequest
Новая
       6

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

3 голосов
/ 29 ноября 2010

Я использую функциональность Dragable / Droppable в Jquery, чтобы разрешить перетаскивание из TreeView в простую таблицу HTML, но обнаружил, что производительность 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 ...

1 Ответ

4 голосов
/ 01 декабря 2010

В конце концов, мне удалось избежать этого, просто сделав 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());
}
...