Jquery：在MouseOver上優化Droppable

Question

我使用Jquery的Draggable/Droppable功能允許從TreeView拖放到簡單的HTML表格，但是我發現Droppable的性能變得非常緩慢，因爲單元格數量在表中增加。

我環顧四周，人們提出的最常見的解決方案是限制活動的可拖動和拖放的數量。現在，限制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（而不是單個單元格），然後找出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()); 
}