禁止 jQueryUI 可排序项目被拖放到某个区域

Question

我有一个使用 jQueryUI Sortable 的看板样式拖放板。

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

一个Board可以有Child-boards，将一组相关的Board归为一个parent board。

我在将卡片拖放到新板上时遇到问题。问题是当卡片被拖到具有子板的板上时，卡片在进入子板表之前过早掉落。

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

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

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

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

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

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

---

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

http://i.imgur.com/9N6tkbj.png

---

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

---

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

---

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

---

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

Answer 1

一种解决方案是将class 添加到这些带有子板的td，并将sortable 设置为仅没有此类的那些。比如：

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

然后：

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

http://jsfiddle.net/yuw2opzr/