title: Why does event on drag not have any effect with jQuery implementation?
body: <p>I want to create a horizontal menu that is contained by 300px and items can be dragged horizontally if containment space is not enough.</p>
  
  <p>The implementation consists of jQuery 2.1.4. and jQuery mobile 1.4.5 and jQuery ui 1.12</p>
  
  <p>Somehow the on drag event is not working, no errors at all, just not working.</p>
  
  <p>I tried a minimal example and it works, but my code in the implementation does not:
  <a href="https://codepen.io/anon/pen/YMaVyX" rel="nofollow noreferrer">https://codepen.io/anon/pen/YMaVyX</a>
  Implementation: <a href="https://watchgurus.de" rel="nofollow noreferrer">https://watchgurus.de</a> </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="draggable"&gt;
      &lt;nav style="position: relative;"&gt;
          &lt;a href="/rolex/" id="nav_rolex" data-ajax="false" &gt;ROLEX&lt;/a&gt;
          &lt;a href="/omega/" id="nav_omega" data-ajax="false" &gt;OMEGA&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After rendering this looks like this:</p>
  
  <pre><code>&lt;div class="draggable"&gt;
      &lt;nav class="ui-draggable ui-draggable-handle" style="position: relative;"&gt;
          &lt;a href="/rolex/" id="nav_rolex" data-ajax="false" class="ui-link"&gt;ROLEX&lt;/a&gt;
          &lt;a href="/omega/" id="nav_omega" data-ajax="false" class="ui-link"&gt;OMEGA&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>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 &gt; 10) {
      ui.position.left = 10;
    }
  
    if (ui.position.left &lt; navWidth - nav[0].scrollWidth) {
      ui.position.left = navWidth - nav[0].scrollWidth + 5;
    }
  });
  </code></pre>