Сортировка jQuery предотвращает сортировку внешнего div во внутренний div

Question

У меня это пока

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

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

Я предполагаю, что мне не хватает одной части в моем jquery

Итак, цель

• Синий может пойти куда угодно внутри дивов
• Зеленый не двигается и не может быть отсортирован
• Серый может сортировать только вокруг другого серого.
• Серый НЕ может перейти в зеленый или синий

Это моя проблема: серый может перейти в зеленый, а большой серый может перейти в другие оттенки серого прямо сейчас, и эта функциональность - не то, что мне нужно. Это единственная проблема, которая у меня есть сейчас. Я, наверное, упускаю что-то очень простое.

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'
});