禁用 jQueryUI Sortable 项目在特定区域被删除

Question

我有一个使用 jQueryUI Sor 的看板式拖放板table。

每一列都是一个 Board，每个可拖动的 Div 是一个 Card。

A Board 可以有 Child-boards 将一组相关的 boards 分组在 1 parent board.

我在将卡片拖放到新看板时遇到问题。问题是当 Card 被拖到有子板的板上并且卡片在进入子板之前过早掉落 table.

它导致卡片掉落在父板 <td> table 单元格内，但在进入子板 <table> 之前，子板位于父板 [=10] 内=].

这张图片应该有助于更好地解释......

红色框显示了我拥有的 2 个具有子板 .
的板的 HTML 这些框上方和下方的 <td> table 单元格是没有子板的常规板。可以将卡片放入这些 <td> 个单元格中。

在有子板的父板上。你可以看到他们里面有一个 <table> <td>.

问题是当卡片被拖到有子板的板上时，卡片很快就会掉落，导致卡片位于 <td> 和子板 [=11] 之间=]...

http://i.stack.imgur.com/mUPHz.png

这是一个例子，显示了在 "undefined" 区域中父板和子板之间掉落的卡片...我需要以某种方式使其无法掉落这方面的一张卡！

显示什么是棋盘和卡片以及子棋盘与没有子棋盘的父棋盘的图像

显示卡片被拖到错误位置的示例以及它如何将子板 table 移开并允许在父子板之间放置。我需要以某种方式防止这种情况发生吗？

如果 <td> 与 CSS class column ui-sortable里面有一个<table>?

这是一个快速的 JSFiddle 来显示问题 http://jsfiddle.net/jasondavis/j37131oo/3/

Answer 1

一个解决方案是向这些 td 添加一个 class 和子板，并将 sortable 设置为仅那些没有此 class 的子板。类似于：

$('.columns > table').parent().addClass('hasChildBoard');

然后：

    $(".column:not(.hasChildBoard)").sortable({
        connectWith: ".column",
    });

Disable jQueryUI Sortable item from being dropped in a certain area