Why does event on drag not have any effect with jQuery implementation?

问题

I want to create a horizontal menu that is contained by 300px and items can be dragged horizontally if containment space is not enough.

The implementation consists of jQuery 2.1.4. and jQuery mobile 1.4.5 and jQuery ui 1.12

Somehow the on drag event is not working, no errors at all, just not working.

I tried a minimal example and it works, but my code in the implementation does not: https://codepen.io/anon/pen/YMaVyX Implementation: 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>

After rendering this looks like this:

<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;
  }
});

来源：https://stackoverflow.com/questions/55743152/why-does-event-on-drag-not-have-any-effect-with-jquery-implementation