禁用jQueryUI可排序项目在某个区域中被删除

Question

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

每一栏都是主席，主板上每个可拖动的Div都是卡。

主席可以儿童主席，将一组相关主板放在1 主板下。

我遇到了将卡片拖放到新主板的问题。问题是当卡被拖到有儿童板的电路板上并且在进入儿童电路板表之前卡过早掉落时。

这导致卡片被丢弃在父棋盘<td>表格单元格内，但在进入父棋盘<table>内的子棋盘<td>之前。

这张图片应该有助于解释一下......

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

在有子板的家长板上。您可以看到他们<table>内有<td>。

问题是当卡被拖到有儿童板的电路板上并且卡很快掉落时会导致卡位于<td>和子板<table>之间....

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

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

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

显示董事会和卡片以及子板与没有儿童板的父母的图像

示例显示卡被拖入坏位置以及它如何将子板表移开并允许父母和孩子之间的下降。我需要以某种方式防止这种情况发生？

如果CSS <td> column ui-sortable内部有<table>，可能有一种方法可以阻止jQueryUI Sortable允许Drop？ < / p>

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

Answer 1

一种解决方案是向这些class添加td子板，并将sortable设置为仅包含此类的$('.columns > table').parent().addClass('hasChildBoard'); 。类似的东西：

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

然后：

enumerate

http://jsfiddle.net/yuw2opzr/