Drag event in mobile not working for owl carousel

Question

I wants to add new item at drag event in owl carousel..when someone drag to right side in mobile it should add new item ...it's working for click event fine. Here is my code:-

<div class="carousel-wrap" style="height:60%;background-color:red;width:100%">
    <div class="owl-carousel owl-theme" style="height:100%;">
          <div class="item" style="height:100%;">USA</div>
          <div class="item" style="height:100%;">UK</div>
          <div class="item" style="height:100%;">Spain</div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script type="text/javascript">
$(document).ready(function() {
    $(".owl-carousel").owlCarousel({
        nav:true,
        items : 1,
        dots:false,
        mouseDrag:true,
        touchDrag:true,
    });

    var i=0;
    $(document).on('click onDragged', '.owl-next' , function() {
        i++;
        if(i>2){
            $('.owl-carousel').owlCarousel('add', "<div class='item'>"+Math.random()+"</div>").owlCarousel('update');
        }
    });
});
</script>
<style type="text/css">
  .carousel-wrap{
    width: 200px;
  }
</style>