Почему событие перетаскивания не влияет на реализацию jQuery?

Question

Я хочу создать горизонтальное меню, содержащее 300 пикселей, и элементы можно перетаскивать по горизонтали, если места для хранения недостаточно.

Реализация состоит из jQuery 2.1.4. и jQuery mobile 1.4.5 и jQuery ui 1.12

Каким-то образом событие перетаскивания не работает, никаких ошибок, просто не работает.

Я попробовал минимальный пример, и он работает, но мой код в реализации: https://codepen.io/anon/pen/YMaVyX Реализация: https://watchgurus.de

HTML

<div class="draggable">
    <nav style="position: relative;">
        <a href="/rolex/" id="nav_rolex" data-ajax="false" >ROLEX</a>
        <a href="/omega/" id="nav_omega" data-ajax="false" >OMEGA</a>
    </nav>
</div>

После рендеринга это выглядит так:

<div class="draggable">
    <nav class="ui-draggable ui-draggable-handle" style="position: relative;">
        <a href="/rolex/" id="nav_rolex" data-ajax="false" class="ui-link">ROLEX</a>
        <a href="/omega/" id="nav_omega" data-ajax="false" class="ui-link">OMEGA</a>
  </nav>
</div>

CSS

nav{
    display: flex;
    flex-direction: row;
}
nav a,
nav a:link {
    margin-right: 10px;
    font-size: 12px;
    text-decoration: none;
    font-weight:normal;
}
nav a.selected:link, a.selected:visited{
    color: #7e000b;
}

.draggable{
    /*margin-top: -2px;*/
    max-width: 300px;
    overflow: hidden;
}

JS

var nav = $('nav');

nav.draggable({
  axis: "x",
  containment: 'draggable',
  distance: 10
});

navWidth = 0;
$('nav a').each(function(index) {
    navWidth += parseInt($(this).width(), 10);
    console.log(navWidth);
});

nav.on( "drag", function( event, ui ) {
  console.log('drag');
  if (ui.offset.left > 10) {
    ui.position.left = 10;
  }

  if (ui.position.left < navWidth - nav[0].scrollWidth) {
    ui.position.left = navWidth - nav[0].scrollWidth + 5;
  }
});