How to make links inside draggble clickable?

Question

JavaScript

Greetings. I make a menu that would scroll on mobile phones. Used jQueryUI Draggble.
Here is the menu.

<div class="mobile-nav navbar navbar-light collapse navbar-collapse" id="navbarMob">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item aside-list__item_yellow ">
                <img class="aside-list__img" src="/netcat_files/125/h_8f609982133f8a3df73ee08749128d6c">
                <a class="nav-link" href="/remont-i-otdelka-kvartir/remont-kvartir/">Ремонт и отделка квартир</a>
            </li>
            <li class="nav-item aside-list__item_orange ">
                <img class="aside-list__img" src="/netcat_files/38/h_750cf683ed4279714936f2f8155c8be1">
                <a class="nav-link" href="/remont-doma/">Ремонт дома, котеджей</a>
            </li>
            <li class="nav-item aside-list__item_grey ">
                <img class="aside-list__img" src="/netcat_files/133/h_356505a39884489b343098ab1d81c5c7">
                <a class="nav-link" href="/remont-nezhilyh-pomescheniy/">Ремонт нежилых помещений</a>
            </li>
            <li class="nav-item aside-list__item_blue ">
                <img class="aside-list__img" src="/netcat_files/39/h_9a0c3c76fd9e86d04ef0cc9b7710f03b">
                <a class="nav-link" href="/vidy-remonta-1/">Виды ремонта</a>
            </li>
            <li class="nav-item aside-list__item_peach ">
                <img class="aside-list__img" src="/netcat_files/135/h_334b5859e65a69efb1df23f6ddba5852">
                <a class="nav-link" href="/obschestroy/">Общестрой</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/">Главная</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/o-kompanii/">О компании</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/aktsii-1/">Акции</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/sale/">Цены</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/otzyvy/">Отзывы</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/kalkulyator/">Калькулятор</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/fotogallereya/">Наши работы</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/stati/">Статьи</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="/kontakty/">Контакты</a>
            </li>
        </ul>
    </div>

Here is the handler

var draggbleMobileMenu = $(".mobile-nav .navbar-nav").draggable({
        axis: "y",
        stop: function( event, ui ) {
            if (ui.position.top >= 0) {
                ui.helper.animate( {left: 0, top: 0}, 200 );
            }
            return true;
        }
    });

Everything seems to be working, scrolling, etc., but the links inside the menu are not clickable on a mobile phone.
That is, in the emulator in chrome, everything is OK and the links work, but on the phone it's gone. What could be the problem?

Answer 1

A crutch that solves a problem

$(".mobile-nav .navbar-nav a").on("touchstart", function (e){
        e.preventDefault();
        window.location.href = $(this).attr("href");
    });