Vertical scrolling while also dragging a repeating group item

[al14]

I am using the Draggable Elements plugin by Bubble to be able to easily re-order a repeating group. This works great when everything is visible on the screen. However, on smaller screens or with longer lists, I may want to grab a draggable item and drag it to below the fold. This is where my problem is.

I would expect that as I am dragging something and approach the bottom of the screen, it would begin to trigger vertical scrolling of the page, and allow me to drop said draggable item lower in the list (which was previously beneath the fold).

When I attempt this behavior, both on mobile and desktop, scrolling appears to be disabled when I am dragging… so I can’t drag anything below the fold. Help!

[al14]

SOLVED! I can’t believe I am saying this, but I solved this by asking ChatGPT to write a script lol. I plugged it into an HTML element on the page, tweaked it slightly, and it worked! Wow…

Anyway, the script is below if anyone is curious. It would be great if this was baked into an updated version of the plugin, but this will certainly do the trick in the meantime.

/* This function adds a listener for mouse movement (on a desktop) or touch movement (on a mobile device) specifically when an element with the class ".ui-droppable-active" is being dragged. If this is the case, and the mouse/finger is close to the top or bottom of the screen, the page will scroll automatically.

This is specific to the "Draggable Elements" plugin provided by Bubble. 
*/
function enableScrollOnDrag() {
    
  //How close (in pixels) to the edge of the screen before scrolling starts
  var scrollThreshold_Desktop = 50;
  var scrollThreshold_Mobile = 200;
    
  //How fast (in pixels) will the page scroll (higher = faster)
  var scrollSpeed_Desktop = 3;
  var scrollSpeed_Mobile = 6;
    
  $(document).on("mousemove", function(event) {
    var activeElement = $(".ui-droppable-active");
    if (activeElement.length > 0) {
      if (event.clientY < scrollThreshold_Desktop) {
        window.scrollBy(0, -scrollSpeed_Desktop);
      } else if (event.clientY > window.innerHeight - scrollThreshold_Desktop) {
        window.scrollBy(0, scrollSpeed_Desktop);
      }
    }
  });
    
  $(document).on("touchmove", function(event) {
    var activeElement = $(".ui-droppable-active");
    if (activeElement.length > 0) {
      if (event.touches[0].clientY < scrollThreshold_Mobile) {
        window.scrollBy(0, -scrollSpeed_Mobile);
      } else if (event.touches[0].clientY > window.innerHeight - scrollThreshold_Mobile) {
        window.scrollBy(0, scrollSpeed_Mobile);
      }
    }
  });
}

// This calls the function so it actually works on the page
$( document ).ready(function() {
     enableScrollOnDrag();
});