Jquery-ui draggable and droppable components inside an 'ul' tag - how to handle overflow?

Question

I am trying to create a node graph where users can drag and drop components into areas using jQuery-ui. The components are limited, and users need to drag and drop them into areas defined by 'ul' tags. I have successfully created draggable and droppable components, but I am facing an issue with overflow.

When the number of draggable components inside a 'ul' tag exceeds the available space, the tag overflows and I am unable to drag any more components. I have tried using overflow-y: auto to add a scrollbar to the 'ul' tag, but this does not solve the problem as I still can't drag beyond the overflowed area.

Can anyone suggest a solution to handle the overflow issue? Is there a way to create a virtual scrollable area so that I can drag and drop components beyond the visible area of the 'ul' tag? Any help would be greatly appreciated.

Here is the relevant code snippet:

<ul id="draggable-area">
  <li class="draggable">Component 1</li>
  <li class="draggable">Component 2</li>
  <!-- More draggable components here -->
</ul>

<div id="droppable-area"></div>

$(function() {
  $(".draggable").draggable({
    helper: "clone",
    revert: "invalid"
  });
  
  $("#droppable-area").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      $(this).append(ui.draggable.clone());
    }
  });
});

To prevent overflow, I tried placing the overflowing elements inside a div that is not visible on the UI, but this approach did not work.

Answer 1

Just add some bottom padding to your droppable area.

$(function() {
  $(".draggable").draggable({
    helper: "clone",
    revert: "invalid"
  });
  
  $("#droppable-area").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      $(this).append(ui.draggable.clone());
    }
  });
});

#droppable-area {
  background: lime;
  padding-top: 1em;
  padding-bottom: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<p>Drag from here</p>
<ul id="draggable-area">
  <li class="draggable">Component 1</li>
  <li class="draggable">Component 2</li>
  <!-- More draggable components here -->
</ul>

<p>Drop in here</p>
<ul id="droppable-area"></ul>