jQuery排序防止将外部div排序为内部div

Question

到目前为止，我有this

$('.sortHolder').sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".sortHolder",
    items : ':not(.noSort)'
});

jQuery('.outer').sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".outer",
    items : ':not(.noSort)'
});

我想我的jquery中缺少了一块

所以目标是

• 蓝色可以在div内的任何地方
• 绿色不动且无法分类
• 灰色只能围绕另一种灰色排序。
• 灰色不能进入绿色或蓝色

这是我的问题，灰色现在可以变成绿色，大的灰色现在可以变成其他灰色，而功能不是我想要的。那是我现在唯一的问题。我可能缺少一些非常简单的东西。

Answer 1

请尝试下面的代码，看看操场，因为我也更改了HTML上的一些类：https://jsfiddle.net/zks5ojwh/5/

$('.grey').sortable({
    placeholder: "ui-state-highlight",
    connectWith: ".grey",
    items : '.blue'
});

$('.sortHolder').sortable({
    placeholder: "ui-state-highlight",
    items: '.grey'
});