I am trying to create Sliding Panel with Draggable Functionality using bootstrap 5 and jQuery but using mousemove event , i found that the panel not moving as quick as mouse that made the entire experience not smooth.

   panel.on('mousedown touchstart', function(e) {
          isDragging = true;
          startY = e.clientY;
          startBottom = parseInt(panel.css('bottom'));
          $(document).on('mousemove touchmove', onMouseMove);
          $(document).on('mouseup touchend', onMouseUp);
        });

        function onMouseMove(e) {
          if (!isDragging) return;
          var dy = startY - e.clientY;
          var newBottom = startBottom + dy;
          if (newBottom % 20 == 0 && newBottom <= 0 && newBottom >= -panelHeight + 40) {
           
              panel.stop().animate({
                bottom: newBottom + 'px'
              }, 300); 
            
          }
        }

        function onMouseUp() {
          isDragging = false;
          $(document).off('mousemove touchmove', onMouseMove);
          $(document).off('mouseup touchend', onMouseUp);

          // Slide up if dragged past threshold, else slide back down
          var currentBottom = parseInt(panel.css('bottom'));
          if (currentBottom > threshold - panelDefaultAreaHeight) {

            panel.stop().animate({
              bottom: (visableAreaHeight - panelHeight) + 'px'
            }, 300); 
            arrowIcon.removeClass('rotate-arrow');

          } else {

            panel.stop().animate({
              bottom: (-panelHeight + panelDefaultAreaHeight) + 'px'
            }, 300); 
            arrowIcon.addClass('rotate-arrow');
          }
        }

https://jsfiddle.net/ahmed007boss/gw2bhs6q/2/