jQuery:在MouseOver上优化Droppable [英] Jquery: optimizing Droppable on MouseOver

问题描述

我正在使用Jquery的Draggable/Droppable功能来允许将TreeView拖放到简单的HTML表中，但是发现随着表中单元格数量的增加，Droppable的性能变得非常缓慢. /p>

我环顾四周，人们建议的最常见的解决方案是限制活动的可拖动对象和可放置对象的数量.现在，限制可拖动对象已经足够简单了(使用树视图节点的鼠标悬停来启用拖动).

然后，我尝试对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"事件的事情，这会容易得多...

解决方案

最后，我设法通过简单地使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());
}

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

解决方案

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

这篇关于jQuery:在MouseOver上优化Droppable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！