3

JqueryのDraggable/Droppable機能を使用して、TreeViewから単純なHTMLテーブルへのドラッグアンドドロップを可能にしていますが、テーブル内のセルの数が増えると、Droppableのパフォーマンスが非常に遅くなることがわかりました。

私は周りを見回しましたが、人々が提案する最も一般的な解決策は、アクティブなドラッグ可能オブジェクトとドロップ可能オブジェクトの数を制限することです。これで、ドラッグ可能なものを制限するのは簡単でした（ツリービューノードのマウスオーバーを使用してドラッグを有効にします）。

次に、ドロップ可能に対して同じことを実行しようとしました（つまり、ユーザーがセルをマウスオーバーしたときにのみセルをドロップ可能にします）が、タイミングの問題が発生しました。

基本的に何が起こるかというと、ユーザーはノードをセル上にドラッグし、ドロップすることはできません。しかし、それからもう一度それをやろうとすると、それはうまくいきます！つまり、マウスオーバーイベントは機能する前に完了する必要がありますが、「完了する」とは、最初のドラッグアンドドロップを停止することを意味し、明らかに理想からはほど遠いものです。

これは私が使用しているコードです：

<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」イベントのようなものがあれば、これははるかに簡単です...

4

1 に答える 1

4

最終的に、(個々のセルではなく) 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());
}
于 2010-12-01T16:37:07.243 に答える