jQuery UI sorting some elements of nested list

问题

In the following jsFiddle, there consists of a phase, week, day.

The idea is that:
1) Phase can be moved above or below other phases
2) Weeks can only be moved between phases (if there are nested days, they'll move with the parent week)
3) Days can be moved into other weeks

As I have it right now, you can move a Week but the Days beneath it do not follow and can become orphaned (bad). The other issue I'm running into is if you move a Day 1 into another week that also has a Day 1, something breaks, the second Day 1 can no longer be moved, it moves the entire Phase grouping (duplicates are okay).

I could really use some help with configuring the sortable options.

$( "#listContainer ul" ).sortable(
{
  /* connectWith: ".group", */
  placeholder: "itemPlaceholder",
  cursor: 'move'
  }
);

$('.group').sortable({
  items: "> div.listItem",
  //    connectWith: ".srtable, .group",
  connectWith: false,
  receive: function( event, ui ) {
    //alert('receive');
    //console.log(ui);
    //console.log(ui.item)
    //console.log($(ui.item).attr('class'))
    if ($(ui.item).hasClass('phaseTitle')) {
      $(ui.sender).sortable("cancel");
      alert('Sorry! Phases cannot be nested');
    }

  }
});

$('.days').sortable({
  connectWith: ".group"
})

来源：https://stackoverflow.com/questions/54016071/jquery-ui-sorting-some-elements-of-nested-list