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

Question

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

每一列都是一个板，板上每个可拖动的 Div 都是一个卡片。

Board 可以有子板，它将一组相关的板分组到一个父板下。

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

它导致卡掉落在父板内 <td>表格单元格，但在进入子板之前<table>在母板里面<td> .

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

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

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

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

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

---

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

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

---

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

---

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

---

也许有一种方法可以防止 jQueryUI Sortable 在 <td> 时允许 Drop使用 CSS 类 column ui-sortable有一个 <table>在里面？

---

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

Answer 1

一种解决方案是向这些带有子板的td 添加一个class，并将sortable 设置为仅没有此类的那些。像这样的东西:

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

然后:

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

http://jsfiddle.net/yuw2opzr/