Jquery Drag drop - One list with sortable and other list with draggable & droppable without sort

I am trying to drag drop items between two lists,

My requirements are,

List A (with drag and drop to List B but not sortable) item 1 item 2 item 3

List B (with sortable and drag/drop to List A) item 4 item 5 item 6

i tried the .sortable(), but it makes the List A with sortable functionality,

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

$( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      beforeStop: function (event, ui) {
      console.log($(ui.helper).parent().attr('id'));
      console.log($(ui.placeholder).parent().attr('id'));
      if($(ui.helper).parent().attr('id') === 'sortable1' && $(ui.placeholder).parent().attr('id') === 'sortable1')
      {
                $(this).sortable('cancel');
          }
             },
    }).disableSelection();
  } );

I even tried to stop the sortable in beforeStop event, but shows me error

$(this).sortable('cancel');

Error: jquery-ui.js:16692 Uncaught TypeError: Cannot read property 'removeChild' of null

Please anyone help me out to resolve this case

Here is what I came up with.

NOTE: I am allowing sortable when dragging an item from listB to listA so that you can choose where to place it, and once the item is dropped listA will no longer be sortable. - If you do not want this please let me know.

The draggable revert option seems to be a bit glitchy but it's included so that the draggable items don't float all over the place.

I am initializing each list as a sortable separately.

listA has draggable items and we do not want to allow sortable here so on drag start we will disable sortability using selector.sortable('disable'). Once we receive an item in listA we need to disable sortability so that these items are no longer sortable. Then we will initialize the dropped item with draggable.

In listB when we start dragging an item we want to enable sortable on the first list so that we can choose where to drop it. When receiving an item in listB, if that item is a draggable we want to destroy the draggable so that it is now only a sortable item.

Here is my fiddle

Hope this is what you are looking for!

init_draggable($('.draggable-item'));

$('#listB').sortable({
  connectWith: '#listA, #listB',
  items: '.draggable-item, .sortable-item',
  start: function(event, ui) {
    $('#listA').sortable('enable');
  },
  receive: function(event, ui) {
    if (ui.item.hasClass('ui-draggable')) {
      // destroy draggable so that we can drag outside the sortable container
      ui.item.draggable("destroy");
    }
  }
});

$('#listA').sortable({
  connectWith: '#listA, #listB',
  items: '.draggable-item, .sortable-item',
  receive: function(event, ui) {
    $('#listA').sortable('disable');
    var widget = ui.item;
    init_draggable(widget);
  }
});

function init_draggable(widget) {
  widget.draggable({
    connectToSortable: '#listB',
    stack: '.draggable-item',
    revert: true,
    revertDuration: 200,
    start: function(event, ui) {
      $('#listA').sortable('disable');
    }
  });
}

ul {
  padding: 10px;
  list-style-type: none;
  width: 200px;
}

li {
  text-align: center;
  padding: 5px 10px;
  margin: 5px;
}

.draggable-item {
  background: #9bcdf0;
}

.sortable-item {
  background: #6c2020;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="listA" class="connectedSortable">
  <li class="ui-state-default draggable-item">Item 1</li>
  <li class="ui-state-default draggable-item">Item 2</li>
  <li class="ui-state-default draggable-item">Item 3</li>
  <li class="ui-state-default draggable-item">Item 4</li>
  <li class="ui-state-default draggable-item">Item 5</li>
</ul>

<ul id="listB" class="connectedSortable">
  <li class="ui-state-highlight sortable-item">Item 1</li>
  <li class="ui-state-highlight sortable-item">Item 2</li>
  <li class="ui-state-highlight sortable-item">Item 3</li>
  <li class="ui-state-highlight sortable-item">Item 4</li>
  <li class="ui-state-highlight sortable-item">Item 5</li>
</ul>