通过拖放在运行时启用/禁用可排序的 jQuery UI（jsFiddle 示例）

Question

我有一个问题要问你们当中的 jQuery 大师。

场景

我正在构建一个网络应用程序，它（除其他外）允许用户在大桌子内对卡片进行排序。该表的一个特点是固定在表顶部的 bin，但同时“固定”到行上。它允许用户将卡片放置在与列相关联的 bin 中，而不是与行相关联。

这是一个stripped down jsFiddle example（制作起来很痛苦）来告诉你我的意思。

问题

问题是，如果您在表格中向下滚动一条路径，然后尝试将一张卡片从表格拖到垃圾箱中，它通常不起作用。取而代之的是，卡片被放置在用户看不到的垃圾箱“后面”的表格单元格中。希望这是有道理的。

问题和攻击计划

我认为解决此问题的最佳方法是在用户将鼠标悬停在 bin 上时以某种方式禁用除 bin 之外的所有表格中的单元格。这样卡片就一定会落入垃圾箱而不是垃圾箱后面的表格单元格中。

你同意吗？有没有更好的方法来解决这个问题？

备注

您可能会看到我的实现，并想知道我为什么要以这种方式实现事物。 （例如为什么我在 bin、顶行和左列中使用表格单元而不是 div。）不幸的是，我无法完全解释为什么我选择了我所做的实现，但我意识到我是在一个此示例未显示的约束数量。所以......我愿意接受有关如何改进布局的建议，但请不要用“好吧，你为什么不以这种 'this' 方式来回答这个问题然后你就不必处理这个问题了，因为你建议的设置很可能由于某种原因对我不起作用。

如果我需要澄清任何事情，请告诉我。非常感谢任何回答的人！

Answer 1

这样可以（fiddle）：

$('#binRow').mouseenter(function() {
    $('tr:not("#binRow") td.card-holder')
        .removeClass('card-holder')
        .addClass('disabled-card-holder');
}).mouseleave(function() {
    $('.disabled-card-holder')
        .removeClass('disabled-card-holder')
        .addClass('card-holder');
});​