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

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

场景

我正在开发一个web应用程序，它（除其他外）允许用户在一张大桌子内对卡片进行排序。此表格的一个功能是固定在表格顶部的箱子，但同时“固定”到行。它允许用户将卡片放在与列关联的容器中，而不是与行关联的容器中

这里有一个（这是一个痛苦的）来告诉你我的意思

问题

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

问题和攻击计划

我认为解决这个问题的最好办法是，一旦用户将鼠标移到存储箱上，就以某种方式禁用放入表中除存储箱以外的所有单元格。这样，卡一定会落在箱子里，而不是箱子后面的表格单元格里

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

注释

你可能会看到我的实现，并想知道为什么我会以我这样的方式实现事情。（比如为什么我在bin、顶行和左列中使用表单元格而不是div。）不幸的是，我无法完全解释为什么我选择了我所做的实现，但我意识到我是在许多约束条件下操作的，这个示例没有显示。所以我愿意接受关于如何改进布局的建议，但请不要用“好吧，你为什么不改为这样设置，这样你就不必处理这个问题了，因为你建议的设置可能因为某种原因对我不起作用。”

如果我需要澄清什么，请告诉我。非常感谢所有回答的人！

这样就可以了（）：

这就可以了（）：

---

@zod，我使用的是最新版本的Chrome，但问题也出现在Firefox中（我甚至懒得测试IE:）。另外，需要注意的是，必须向下滚动才能看到问题。@zod，我使用的是最新版本的Chrome，但问题也出现在Firefox中（我甚至懒得测试IE:））。此外，重要的是要注意，在看到问题之前必须向下滚动。谢谢你的回答，Majid！这真的很接近。不过，问题是（我认为）当你点击箱子里的一张卡并将其拖出表格时，箱子的类仍然设置为禁用，因此该卡不能被放入表格中。我更改了一些样式，以便你可以看到我的意思：持卡人有红色背景，禁用的持卡人有灰色背景。一旦鼠标进入箱子，其他人就会看到r卡持有者永远不会重新启用。问题是：我在第二次回调中丢失了一个

，我修复了它，但仍然没有运气。我不知道是什么阻止了较低行上的滴落。链接到固定点：是的，我在最后一次评论后也发现了这个问题。我仍然在搞乱它。如果我找到了修复方法，我会发表评论。+1表示建议c挂起drop类并提供一个示例。感谢您的帮助！我可以通过检查每个容器的滚动位置使其正常工作：再次感谢您的帮助。感谢您的回答，Majid！这非常接近。但是，问题是（我认为）当你点击箱子里的一张卡并将其拖出表格时，箱子的类仍然设置为禁用，因此该卡不能被放入表格中。我更改了一些样式，以便你可以看到我的意思：持卡人有红色背景，禁用的持卡人有灰色背景。一旦鼠标进入箱子，其他人就会看到r卡持有者永远不会重新启用。问题是：我在第二次回调中丢失了一个

，我修复了它，但仍然没有运气。我不知道是什么阻止了较低行上的滴落。链接到固定点：是的，我在最后一次评论后也发现了这个问题。我仍然在搞乱它。如果我找到了修复方法，我会发表评论。+1表示建议c挂起drop类并提供一个示例。感谢您的帮助！我可以通过检查每个容器的滚动位置使其正常工作：再次感谢您的帮助。

$('#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');
});​