Link to Video: https://youtu.be/16OXCpw3MBs

I have a stange one, I have three div's two of which scroll horizontal/vertical all of the divs have cards in that are draggable to enable moving of cards and ordering them. All works fine until you scroll one of the div's so that the columns are "under" another div.

I have attached a video to try to show this as I can't think of of an easy way to explain the issue.

Here is the drag and drop code:

$(function () {
  $('ul.sort')
    .sortable({
      containment: 'document',
      helper: 'clone',
      appendTo: "body",
      connectWith: ".sortable",
      stop: function (e, ui) {
         //Functions removed for security - some AJAX made here
        }
      },
      
    })
    .disableSelection();
});

I thought Z-Index would sort it but the draggable component is connecting with droppable elements under the element I want it to connect with.

Thanks in advance.

Link to Video: https://youtu.be/16OXCpw3MBs