为什么拖动事件对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;
  }
});