Make container both sortable and dropable JQuery

Question

I have a container and I am using jquery-ui for enabling drag, drop and sortable functionalities.

I want both sortable and droppable features at once, but I am having some problems. As soon as I make the droppable container sortable. The droppable functionalities are not working properly.

I tried connectToSortable on the draggable elements and connectedWith on the sortable container. Both did not yield me the expected results.

Here is the HTML

<div id='blocks-editor'>
  <div class='object'>moveUp</div>
  <div class='object'>moveDown</div>
  <div class='object'>moveRight</div>
  <div class='object'>moveLeft</div>
  <div class='popup'>for</div>
</div>

Here is the JavaScript

  $('#blocks-editor .object').draggable({
    helper: 'clone',
    containment: '#blocks-editor',
    revert: 'invalid',
    scroll: true,
  });

  $('#blocks-editor .popup').draggable({
    helper: 'clone',
    containment: '#blocks-editor',
    revert: 'invalid',
    scroll: true,
  });

  $('#blocks-editor .popup').droppable({
    activeClass: 'ui-state-default',
    helper: 'clone',
    accept: '.object',
    greedy: true,
    drop(event, ui) {
      $(ui.draggable).addClass('insidePopup');
      ui.draggable.appendTo($(this));
    },
  });

  $('#blocks-editor').droppable({
    helper: 'clone',
    greedy: true,
    drop(event, ui) {
      ui.draggable.appendTo($(this));
      $(ui.draggable).removeClass('insidePopup');
    },
  });

Here is a link to a codepen demonstrating the above code - https://codepen.io/saidarshan/pen/PogqQQm

The expected result should be same as the working example given, except that it should be sortable.

Any help is appreciated. Thank You.