禁止 jQueryUI Sortable 项目被放置在某个区域

Question

我有一个使用 jQueryUI Sortable 的看板风格拖放板。

每列都是一个Board ，并且板上的每个可拖动 Div 都是一个Card 。

一个董事会可以有子董事会，这些子董事会将一组相关的董事会分组在一个父董事会之下。

我在将卡片拖放到新板上时遇到问题。 问题是当一张卡被拖到一个有子板的板上时，卡在进入子板表之前过早地掉了下来。

它导致卡片被放入父板<td>表格单元格内，但在进入父板<td>内的子板<table> <td> 。

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

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

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

问题是当卡片被拖到具有子板的板上并且卡片很快被放下时，导致卡片位于<td>和子板<table> ......

这是一个示例，显示了在“未定义”区域中放置在父板和子板之间的卡片......我需要以某种方式使其不可能在该区域中放置卡片！

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

在此处输入图片说明

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

在此处输入图片说明

如果带有 CSS 类column ui-sortable的<td> <table>里面有一个<table> ，也许有一种方法可以防止 jQueryUI Sortable 允许 Drop ？

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

Answer 1

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

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

进而：

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