为什么在拖动事件没有使用jQuery的实施有什么影响？(Why does event on drag

2019-10-31 09:18发布

我想创建一个由300像素和包含的项目可以水平，如果遏制空间不够被拖进一个水平菜单。

实现由jQuery的2.1.4的。和jQuery移动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;
}

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