Question

我对你们中的jQuery大师提出了一个问题。

方案

我正在构建一个Web应用程序，其中包括允许用户对大表内的卡片进行排序。此表的一个功能是固定在表顶部的bin，但同时“固定”到行。它允许用户将卡放在与列关联但不是一行的bin中。

这是一个stripped down jsFiddle example（这很痛苦），可以告诉你我的意思。

问题

问题是，如果你在表格中向下滚动，然后尝试将卡片从表格拖到垃圾箱中，它通常不起作用。相反的是，卡被放置在用户无法看到的垃圾箱“后面”的表格单元格中。希望这是有道理的。

问题和攻击计划

我认为解决此问题的最佳方法是，只要用户将鼠标悬停在垃圾箱上，就会以某种方式禁止丢弃除了垃圾箱之外的表格中的所有单元格。这样，卡片肯定会落在垃圾箱中，而不是放在垃圾箱后面的桌子中。

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

备注

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

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

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

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

1 个答案: