If I understand you correctly you need two sortables - one for the parents and one for the children and then the children should connectWith
the parents and you need a tolerance
property.
// Sort the parents
$(".sortable").sortable({
containment: "parent",
items: "> div",
handle: ".move",
tolerance: "pointer",
cursor: "move",
opacity: 0.7,
revert: 300,
delay: 150,
dropOnEmpty: true,
placeholder: "movable-placeholder",
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
}
};
// Sort the children
$(".group-items").sortable({
containment: "parent",
items: "> div",
tolerance: "pointer",
connectWith: '.group-items'
});
See my Fiddle demo.
--- UPDATE #1 ---
Updated Fiddle demo 2 to only allow children to bind to its parent.
--- UPDATE #2 ---
Updated Fiddle demo 3 to have a placeholder on each child element and allow to drag to empty parent. The empty parent just needed a min-height
CSS.